/* ================================================================
   STYLES.CSS
   Mac OS X "Aqua" themed personal resume site.
   Every section below is labeled so you know exactly what to edit.
   ================================================================ */

/* ---- COLOR & FONT TOKENS ----
   Central place to change the whole palette / font in one spot. */
:root{
  --aqua-blue-1:#5fa8f5;   /* button gloss highlight */
  --aqua-blue-2:#1a5fd4;   /* button base blue */
  --aqua-blue-3:#0a3d91;   /* button border / dark blue */
  --metal-light:#f0f0f0;   /* brushed-metal window frame, light edge */
  --metal-mid:#d6d6d6;     /* brushed-metal window frame, mid tone */
  --metal-dark:#a8a8a8;    /* brushed-metal window frame, dark edge */
  --pinstripe:#e9e9e9;     /* flat tag background */
  --text:#1a1a1a;
  --text-dim:#555;
  --red:#ff5f57;           /* traffic light: close */
  --yellow:#ffbd2e;        /* traffic light: minimize */
  --green:#28c840;         /* traffic light: zoom */

  /* San Francisco font stack: renders as real SF on Apple devices
     (macOS Safari / iOS / iPadOS) via -apple-system. Apple does not
     license SF for embedding on the web, so non-Apple browsers fall
     back to Segoe UI / Roboto / Helvetica automatically. */
  --font-sf: -apple-system, BlinkMacSystemFont, "SF Pro Text",
             "SF Pro Display", "Segoe UI", Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }

/* ================================================================
   BACKGROUND WALLPAPER
   The full-screen radial-gradient standing in for a desktop
   wallpaper image (classic Mac OS X "Aqua Blue" default look).
   Swap this for a background-image if you want a real photo/wallpaper.
   ================================================================ */
html,body{
  margin:0;padding:0;height:100%;
  font-family:var(--font-sf);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
body{
  height:100vh;
  position:relative;
  user-select:none;
  background: url('iphone5.jpg') center/cover no-repeat;
  /* ^ this radial-gradient IS the wallpaper. Replace with:
       background: url('wallpaper.jpg') center/cover no-repeat;
     if you'd rather use an actual image file. */
}

/* ================================================================
   MENU BAR
   Fixed strip along the top of the viewport, styled like the
   classic Mac OS X system menu bar (brushed white, hairline
   bottom border, drop shadow to lift it off the wallpaper).
   ================================================================ */
#menubar{
  position:fixed;top:0;left:0;right:0;height:22px;
  background:linear-gradient(to bottom, #fefefe 0%, #e2e2e2 100%);
  border-bottom:1px solid #999;
  display:flex;align-items:center;
  padding:0 12px;
  font-size:13px;
  color:var(--text);
  z-index:1000;
  box-shadow:0 1px 2px rgba(0,0,0,0.2);
}
#menubar .apple{ font-weight:bold; margin-right:18px; }
#menubar span{ margin-right:18px; font-weight:600; }
/* menu-extras = the wifi / battery / clock cluster on the right,
   same spot where real macOS keeps its menu-bar icons */
#menubar .menu-extras{
  margin-left:auto; margin-right:0;
  font-weight:400; color:var(--text-dim);
  display:flex; align-items:center; gap:6px;
}

/* ================================================================
   DESKTOP LABEL
   Decorative file icon sitting directly on the wallpaper.
   ================================================================ */
#desktop-label{
  position:fixed; top:34px; right:18px; color:#fff;
  text-align:center; font-size:12px;
  text-shadow:0 1px 2px rgba(0,0,0,0.5);
  z-index:5;
}

/* ================================================================
   WINDOW CHROME (shared by every window)
   ================================================================ */
.window{
  position:absolute;
  width:480px;
  background:var(--metal-light);
  border-radius:9px;
  overflow:hidden;
  display:none;
  flex-direction:column;
  /* baseline elevation for a window that is NOT on top */
  box-shadow:0 20px 50px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.15);
  transform-origin:center center;
}
.window.open{ display:flex; }

/* HALO — the light black glow around whichever window is currently
   on top of the others, so overlapping windows read as layered
   (like real macOS drop-shadow depth cues). */
.window.active{
  z-index:100;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.18),      /* crisp hairline edge */
    0 0 28px 6px rgba(0,0,0,0.30),   /* soft black halo */
    0 25px 60px rgba(0,0,0,0.55);    /* deep drop shadow */
}

/* Top glass highlight — a thin sheen across the very top edge of
   the window frame, echoing Aqua's glossy, reflective surfaces. */
.window::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:8px;
  background:linear-gradient(to bottom, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events:none;
  z-index:2;
}

/* ---- Title bar (pinstripe, draggable) ---- */
.titlebar{
  height:26px;
  background:repeating-linear-gradient(
    to bottom,
    #f4f4f4 0px, #f4f4f4 2px,
    #e6e6e6 2px, #e6e6e6 4px
  );
  border-bottom:1px solid #b8b8b8;
  display:flex;align-items:center;
  padding:0 8px;
  cursor:grab;
  flex-shrink:0;
  position:relative;
}
.titlebar:active{ cursor:grabbing; }
.titlebar .wtitle{
  flex:1;text-align:center;
  font-size:13px;font-weight:600;color:#444;
  margin-right:56px; /* balances the traffic-light cluster */
}

/* ---- Traffic-light buttons (close / minimize / zoom) ---- */
.traffic{ display:flex;gap:7px;margin-right:10px; }
.traffic button{
  width:12px;height:12px;border-radius:50%;
  border:1px solid rgba(0,0,0,0.25);
  cursor:pointer;
  padding:0;
  position:relative;
}
.traffic .close{ background:linear-gradient(to bottom,#ff8a80,var(--red)); }
.traffic .min{   background:linear-gradient(to bottom,#ffd479,var(--yellow)); }
.traffic .zoom{  background:linear-gradient(to bottom,#7ee08a,var(--green)); }
.traffic button:hover::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:rgba(0,0,0,0.15);
}

/* ================================================================
   WINDOW BODY / CONTENT
   Kept intentionally FLAT — plain white background, simple
   dividers, no extra drop shadows — like a pre-2014 iOS app's
   content view sitting inside a glossy Aqua chrome frame.
   ================================================================ */
.windowbody{
  background:#fff;
  padding:20px 24px;
  overflow-y:auto;
  max-height:60vh;
  line-height:1.5;
  font-size:14px;
  color:var(--text);
}
.windowbody h1{ font-size:20px; margin:0 0 4px; font-weight:600; }
.windowbody h2{
  font-size:15px; margin:18px 0 6px; color:var(--aqua-blue-3);
  border-bottom:1px solid #ddd; padding-bottom:4px; font-weight:600;
}
.windowbody .subtitle{ color:var(--text-dim); font-size:13px; margin-bottom:14px; }
.windowbody p{ margin:6px 0; }
.windowbody ul{ margin:6px 0; padding-left:20px; }

/* Flat tag chips — solid flat color, no border/gradient */
.windowbody .tag{
  display:inline-block;
  background:var(--pinstripe);
  border-radius:4px;
  padding:3px 9px;
  font-size:12px;
  margin:2px 4px 2px 0;
  color:var(--text);
}

/* Flat, borderless avatar/thumbnails — no drop shadow */
.avatar{
  width:72px;height:72px;border-radius:8px;
  object-fit:cover;
  float:left;margin-right:16px;
}
.proj{
  display:flex;gap:12px;margin-bottom:16px;padding-bottom:16px;
  border-bottom:1px solid #eee;
}
.proj img{
  width:96px;height:64px;object-fit:cover;border-radius:4px;
  flex-shrink:0;
}

/* Aqua "gel" button — the one intentionally glossy accent inside
   the otherwise flat content area (mailto / call-to-action button) */
.btn-aqua{
  display:inline-block;
  background:linear-gradient(to bottom, var(--aqua-blue-1), var(--aqua-blue-2));
  color:#fff;border:1px solid var(--aqua-blue-3);
  border-radius:14px;padding:6px 18px;font-size:13px;font-weight:600;
  text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
  cursor:pointer;
}
.btn-aqua:hover{ background:linear-gradient(to bottom, #74b6ff, #2469d6); }

/* ================================================================
   GENIE EFFECT (open + close animation)
   Windows shrink/stretch toward their Dock icon, mimicking the
   classic Mac OS X "genie" minimize animation. The exact --dx/--dy
   offset (how far to travel) is calculated in script.js right
   before the animation class is applied.
   ================================================================ */
.window.genie-out{
  animation: genieOut 0.42s cubic-bezier(.55,0,.85,.35) forwards;
}
.window.genie-in{
  animation: genieIn 0.42s cubic-bezier(.15,.65,.4,1) forwards;
}
@keyframes genieOut{
  0%   { transform: translate(0,0) scale(1,1);            opacity:1; }
  55%  { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(0.45,0.18); opacity:0.85; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.04,0.04); opacity:0; }
}
@keyframes genieIn{
  0%   { transform: translate(var(--dx), var(--dy)) scale(0.04,0.04); opacity:0; }
  45%  { transform: translate(calc(var(--dx) * 0.6), calc(var(--dy) * 0.6)) scale(0.45,0.18); opacity:0.85; }
  100% { transform: translate(0,0) scale(1,1);            opacity:1; }
}

/* ================================================================
   DOCK
   Fixed to the bottom of the screen. Frosted-glass bar containing
   one icon per window, each with a glossy shine + a mirrored
   reflection underneath — a signature Mac OS X Dock detail.
   ================================================================ */
#dock-wrap{
  position:fixed;bottom:0;left:0;right:0;
  display:flex;justify-content:center;
  padding-bottom:10px;
  z-index:900;
  pointer-events:none;
}
#dock{
  display:flex;align-items:flex-end;gap:14px;
  padding:8px 16px 6px;
  background:rgba(255,255,255,0.25);
  border:1px solid rgba(255,255,255,0.4);
  border-radius:18px;
  backdrop-filter:blur(6px);
  box-shadow:0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.6);
  pointer-events:auto;
  overflow:visible; /* so icon reflections aren't clipped */
}
.dock-icon{
  width:52px;height:52px;
  border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;
  background:linear-gradient(to bottom, #fafafa, #cfcfcf);
  border:1px solid #999;
  box-shadow:0 3px 6px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor:pointer;
  transition:transform 0.12s ease-out;
  position:relative;
}
.dock-icon:hover{ transform:translateY(-14px) scale(1.25); }

/* Glass shine — diagonal highlight across the top half of each icon */
.dock-icon::before{
  content:'';
  position:absolute; top:0; left:0; right:0; height:50%;
  border-radius:12px 12px 50% 50% / 12px 12px 100% 100%;
  background:linear-gradient(to bottom, rgba(255,255,255,0.75), rgba(255,255,255,0));
  pointer-events:none;
}

/* Mirrored reflection beneath each icon (uses the same emoji via
   the data-icon attribute set in index.html, flipped and faded) */
.dock-icon::after{
  content: attr(data-icon);
  position:absolute; top:100%; left:0; width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  transform:scaleY(-1);
  opacity:0.28;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 65%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,0.6), transparent 65%);
  pointer-events:none;
}

.dock-icon .label{
  position:absolute;bottom:64px;left:50%;transform:translateX(-50%);
  background:rgba(40,40,40,0.85);color:#fff;
  padding:3px 8px;border-radius:4px;font-size:12px;
  white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity 0.15s;
  z-index:5;
}
.dock-icon:hover .label{ opacity:1; }

/* Small dot under running apps, exactly like real macOS */
.dock-icon .dot{
  position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);
  width:4px;height:4px;border-radius:50%;background:#333;
  opacity:0; z-index:5;
}
.dock-icon.running .dot{ opacity:1; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width:600px){
  .window{ width:92vw; left:4vw !important; }
  .avatar{ float:none; margin:0 0 10px; }
}