/* ABOUT PAGE: the fake desktop */
.desk{
  --desk-bg: radial-gradient(var(--hatch) 1.4px, transparent 1.5px) 0 0/24px 24px, var(--fill);
  position:relative;z-index:0;overflow:hidden;margin-top:4rem;
  min-height:max(46rem,calc(100svh - 4rem));
  background:var(--desk-bg);
}
.menu a[aria-current="page"]{background-size:100% 2px}

/* A window. Change the colors here to restyle every window at once. */
.win{position:absolute;left:var(--x);top:var(--y);width:var(--w,24rem);max-width:calc(100% - 1rem);background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);animation:pop .7s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*120ms + 200ms)}
@keyframes pop{from{transform:scale(.7);opacity:0}}
.win-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem .5rem .35rem .8rem;background:var(--coral);color:var(--paper);border-bottom:2px solid var(--ink);font:500 .9rem/1.2 var(--sans);cursor:grab;touch-action:none;user-select:none}
.win-bar:active{cursor:grabbing}
.win-x{width:1.4rem;height:1.4rem;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font:600 .95rem/1 var(--sans)}
.win-x:hover{background:var(--ink);color:var(--paper)}
.win-body{padding:1rem 1.1rem 1.2rem}
.win-body p+p{margin-top:.8rem}
.win-body img{width:100%;height:auto}
.win-body h3{font:400 1.5rem/1.15 var(--serif);margin-bottom:.6rem}
.win-body dl{margin-top:0}
.win-body .cap-note{margin-top:.6rem;font-size:.9rem;color:var(--grey)}
.win{cursor:grab;touch-action:none;user-select:none}
.win:active{cursor:grabbing}
.win a,.win-x{cursor:pointer}
.win-body img{pointer-events:none;-webkit-user-drag:none}

/* A sticker: a loose draggable graphic */
.sticker{position:absolute;left:var(--x);top:var(--y);width:var(--w,8rem);height:auto;cursor:grab;touch-action:none;user-select:none;-webkit-user-drag:none;animation:pop .7s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:calc(var(--i)*120ms + 200ms)}

/* glitch copies + shaking desktop */
.win.ghost{pointer-events:none;animation:pop .25s cubic-bezier(.3,1.5,.5,1) backwards;animation-delay:0s}
.desk.glitching{animation:jitter .12s steps(2) infinite}
@keyframes jitter{0%{transform:translate(0,0)}50%{transform:translate(-3px,2px)}100%{transform:translate(3px,-2px)}}

/* The taskbar along the bottom. Underlined = window is open. */
.taskbar{position:absolute;left:0;right:0;bottom:0;z-index:9999;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;padding:.7rem var(--pad);background:var(--paper);border-top:2px solid var(--ink);font:500 .9rem/1.4 var(--sans)}
.taskbar button[aria-pressed="false"]{color:var(--grey)}

/* PHONES: windows stack in a column, no dragging, no taskbar or stickers */
@media(max-width:800px){
  .desk{display:flex;flex-direction:column;gap:1.4rem;padding:1.4rem var(--pad) 2rem;margin-top:7.5rem;min-height:0}
  .win{position:static;width:auto;max-width:none;animation:none}
  .win-bar{cursor:default}
  .win-x,.taskbar,.sticker{display:none}
  .win{cursor:default;touch-action:auto;user-select:auto}
}

/* leaves blown by wind. The path each leaf follows is now built in leaves.js,
   so the CSS only has to draw the leaf and its small flutter. */
.leaves{position:fixed;inset:0;z-index:10000;pointer-events:none;overflow:hidden}
.leaves i{position:absolute;left:0;top:0;width:var(--w);height:calc(var(--w)*.55);will-change:transform}
.leaves i::before{content:"";position:absolute;inset:0;background:var(--c);border-radius:0 100% 0 100%;animation:flutter var(--flap) ease-in-out infinite alternate}
@keyframes flutter{
  from{transform:translateY(calc(var(--wob) * -1)) rotate(calc(var(--spin) * -1))}
  to{transform:translateY(var(--wob)) rotate(var(--spin))}
}

/* INSTAGRAM WARNING POP-UP (social.js) */
.ig-back{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:1rem;background:rgba(30,32,31,.35)}
.ig-win{width:min(22rem,100%);background:var(--paper);border:2px solid var(--ink);box-shadow:7px 7px 0 var(--ink);
  animation:pop .6s cubic-bezier(.3,1.5,.5,1) backwards;transform-origin:50% 60%;
  transition:transform .45s cubic-bezier(.3,1.4,.5,1)}
.ig-win.t1{transform:rotate(-10deg) translateY(6px)}
.ig-win.t2{transform:rotate(8deg) translateY(-2px)}
.ig-bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.35rem .5rem .35rem .8rem;background:var(--coral);color:var(--paper);border-bottom:2px solid var(--ink);font:500 .9rem/1.2 var(--sans)}
.ig-x{width:1.4rem;height:1.4rem;display:grid;place-items:center;background:var(--paper);color:var(--ink);border:2px solid var(--ink);font:600 .95rem/1 var(--sans)}
.ig-x:hover{background:var(--ink);color:var(--paper)}
.ig-body{display:grid;justify-items:center;gap:1rem;padding:1.2rem 1.4rem 1.5rem;text-align:center}

/* the caution line: fades and collapses when it "clears" */
.ig-warn{display:flex;align-items:center;gap:.7rem;text-align:left;font:400 .95rem/1.35 var(--sans);color:var(--coral-d);
  max-height:5rem;overflow:hidden;transition:opacity .5s,max-height .5s .1s,margin .5s .1s}
.ig-warn b{font:600 1.1rem/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase}
.ig-tri{flex:none;width:2.2rem;height:2.2rem}
.ig-warn.gone{opacity:0;max-height:0;margin-block:-.5rem}


/* CAUTION PULSE: the triangle and the Warning text slowly fade down and back up.
   It goes on the CHILDREN of .ig-warn (the icon and the text), not on .ig-warn itself,
   because .ig-warn already uses opacity to fade away when the loading finishes.
   Two animations fighting over the same property would break that fade-out. */
.ig-warn > *{animation:caution 1.2s ease-in-out infinite}
@keyframes caution{
  0%, 100%{opacity:1}     /* full strength */
  50%{opacity:.45}        /* dimmed. Lower number = stronger flash */
}

.ig-logo{width:4.5rem;height:4.5rem;color:var(--ink)}
.ig-track{width:100%;height:16px;border:2px solid var(--ink);background:var(--paper);overflow:hidden}
.ig-track i{display:block;height:100%;background:var(--coral);transform-origin:left;transform:scaleX(0)}
.ig-status{font:italic 400 1.15rem/1.2 var(--serif)}

/* spacing between the social links inside a window; wraps if the window is narrow */
.win-body .links{flex-wrap:wrap;gap:.4rem 1.6rem}

/* BOOT SCREEN: a full-screen fake terminal. Black screen, coral dotted text.
   boot.js removes it once the page has "booted". */
.boot{
  position:fixed;inset:0;z-index:30000;
  display:grid;place-items:center;padding:1.5rem;
  background:#0a0a0a;color:var(--coral);
  font-family:"DotGothic16",monospace;      /* dotted, old-school look */
  font-size:clamp(1rem,2.4vw,1.35rem);line-height:1.7;letter-spacing:.06em;
  overflow:hidden;transition:opacity .7s ease,visibility .7s ease;
}
/* faint scanlines so it reads like an old CRT monitor */
.boot::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.35) 0 2px,transparent 2px 4px);
}
.boot-screen{position:relative;z-index:1;width:min(34rem,100%)}
.boot-line{margin:0 0 .35rem}
.boot-dim{color:#7a2b2a}
.boot-prompt{margin-top:1.4rem;text-shadow:0 0 8px rgba(188,60,74,.55)}
.boot-hint{display:block;margin-bottom:.4rem;color:#8f3a38;font-size:.85em}
/* the input line: a coral underline with a ">" prompt */
.boot-input-row{display:flex;align-items:center;gap:.5rem;border-bottom:1px solid var(--coral);padding-bottom:.2rem}
.boot-caret{color:var(--coral)}
.boot-pass{flex:1;min-width:0;background:transparent;border:0;outline:none;color:var(--coral);font:inherit;letter-spacing:.1em;caret-color:var(--coral)}
/* the blinking underscore after BOOTING */
.boot-booting{text-shadow:0 0 8px rgba(188,60,74,.55)}
.boot-booting::after{content:"_";animation:bootblink 1s steps(1) infinite}
@keyframes bootblink{50%{opacity:0}}
/* added by boot.js to fade the screen away */
.boot.done{opacity:0;visibility:hidden}

/* reduce motion: no slow fade */
@media(prefers-reduced-motion:reduce){.boot{transition:none}.boot-booting::after{animation:none}}

/* IMMORTAL SNAIL (snail.js): your APNG animation crawls toward the mouse */
.snail{
  position:fixed;left:0;top:0;z-index:15000;
  pointer-events:none;opacity:0;transition:opacity .5s ease;
  will-change:transform;
}
.snail.on{opacity:1}
.snail-art{display:block;width:90px;height:54px;transform-origin:50% 50%}

/* BOSS BAR (snail.js): slides up under the navbar when the snail appears */
.snail-boss{
  position:fixed;left:50%;top:4.25rem;z-index:11;
  width:min(34rem,calc(100% - var(--pad) * 2));
  transform:translate(-50%,.75rem);opacity:0;pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;
  font-family:"DotGothic16",monospace;
}
.snail-boss.on{opacity:1;transform:translate(-50%,0)}
.snail-boss-top{
  display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-bottom:.35rem;letter-spacing:.14em;font-size:.8rem;color:var(--coral);
}
.snail-boss-name{font-size:.95rem;text-shadow:0 0 7px rgba(188,60,74,.45)}
.snail-boss-lv{color:var(--ink);opacity:.6;letter-spacing:.06em}
.snail-boss-track{
  height:.7rem;padding:2px;border:1px solid var(--ink);
  background:var(--paper);box-shadow:3px 3px 0 rgba(30,32,31,.2);
}
.snail-boss-fill{height:100%;width:100%;background:var(--coral);animation:snailboss 2.2s ease-in-out infinite alternate}
@keyframes snailboss{from{opacity:.6}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.snail-boss-fill{animation:none}}