/* ===== Smiley cursors =====
     smile — everywhere; wink — anything clickable (replaces the hand); yum — while mouse is down */
  :root{
    --cur-smile: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><circle cx="21" cy="13" r="1.6" fill="%23222"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') 16 16;
    --cur-wink: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><path d="M18.6 12.8c1.5-1.1 3.3-1.1 4.8 0" stroke="%23222" stroke-width="1.8" fill="none" stroke-linecap="round"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') 16 16;
    --cur-yum: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><circle cx="21" cy="13" r="1.6" fill="%23222"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/><path d="M14.5 22c0.6 2.5 1.2 4 1.5 4s0.9-1.5 1.5-4" stroke="%23FF6045" stroke-width="2.4" fill="none" stroke-linecap="round"/></svg>') 16 16;
    --cur-smile-xl: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32"><circle cx="16" cy="16" r="14" fill="%23FFE93E" stroke="%23222" stroke-width="1.5"/><circle cx="11" cy="13" r="1.6" fill="%23222"/><circle cx="21" cy="13" r="1.6" fill="%23222"/><path d="M10 19c2 3 4.5 4.5 6 4.5s4-1.5 6-4.5" stroke="%23222" stroke-width="2" fill="none" stroke-linecap="round"/></svg>') 32 32;
  }
  body{ cursor: var(--cur-smile), auto; }
  *{ cursor:inherit; } /* no element falls back to a system cursor (finger, I-beam, arrow) */
  a, button, input, select, textarea, video{ cursor: var(--cur-wink), pointer; }
  body.clicking, body.clicking *{ cursor: var(--cur-yum), auto !important; }
  /* shake-to-find: the smiley grows while the mouse is being shaken */
  body.cursor-big, body.cursor-big *{ cursor: var(--cur-smile-xl), auto !important; }
  #cur-preload{ position:fixed; top:0; left:0; width:3px; height:1px; opacity:0; pointer-events:none; display:flex; }
  #cur-preload i{ width:1px; height:1px; }
  #cur-preload i:nth-child(1){ cursor:var(--cur-smile-xl), auto; }
  #cur-preload i:nth-child(2){ cursor:var(--cur-wink), auto; }
  #cur-preload i:nth-child(3){ cursor:var(--cur-yum), auto; }

  /* ===== Color hierarchy =====
     1. --white     #FFFFFF hero     — dominant: page surfaces
     2. --primary   #5F3DFF violet   — lead accent: headings, buttons, links, numbers
     3. --secondary #96FFD2 mint     — support accent: chips, small fills
     4. --highlight #FFE93E yellow   — emphasis accent: cursor, selection moments
     5. --hot       #FF6045 coral    — action accent: section labels, hovers
     6. --muted     #7F75AB lavender — quiet accent: secondary text, metadata
     --ink is the derived near-black for body text. */
  :root{
    --primary:#5F3DFF;
    --secondary:#96FFD2;
    --highlight:#FFE93E;
    --hot:#FF6045;
    --muted:#7F75AB;
    --ink:#28204a;
    --white:#ffffff;
    --wall:#f6f4fc;
    --surface:#ffffff;
    --line:#e5e2f0;
    --heading:var(--primary);
  }
  body.dark{
    --wall:#16121f;
    --surface:#221c36;
    --line:#332c50;
    --ink:#efeaff;
    --muted:#a79ed3;
    --heading:#9b81ff;
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    font-family:'Inter', sans-serif;
    background:var(--wall); color:var(--ink);
    transition:background .3s ease, color .3s ease;
  }
  ::selection{ background:var(--highlight); color:#222; }

  /* ===== Top bar ===== */
  #topbar{
    position:fixed; top:0; left:0; right:0; z-index:1000;
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 28px;
    backdrop-filter:blur(12px);
    background:color-mix(in srgb, var(--wall) 80%, transparent);
    border-bottom:1px solid var(--line);
  }
  .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font-weight:600; font-size:14px; }
  .brand svg{ width:22px; height:22px; }
  #topbar nav{ display:flex; align-items:center; gap:22px; }
  #topbar nav a{ text-decoration:none; color:var(--ink); font-size:13px; font-weight:500; opacity:0.75; }
  #topbar nav a:hover{ opacity:1; color:var(--heading); }
  #theme-toggle{ background:none; border:none; font-size:15px; line-height:1; padding:0; }

  /* ===== Hero ===== */
  .hero{
    min-height:100vh; display:flex; flex-direction:column;
    align-items:center; justify-content:center; text-align:center;
    padding:120px 24px 60px; gap:28px;
  }
  .kicker{
    font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--hot);
  }
  .hero h1{
    font-family:'Unbounded'; font-weight:800;
    font-size:clamp(34px, 6.5vw, 76px); line-height:1.05;
    color:var(--heading);
  }
  .hero-reel{ position:relative; width:min(1000px, 94vw); }
  .hero-reel video{
    width:100%; display:block; border-radius:16px;
    box-shadow:0 30px 80px rgba(40,32,74,0.35);
  }
  .reel-tag{
    position:absolute; top:14px; left:14px;
    background:rgba(0,0,0,0.65); color:#fff; font-size:11px; font-weight:600;
    padding:5px 10px; border-radius:8px; pointer-events:none;
  }
  .scroll-cue{ font-size:12px; color:var(--muted); line-height:1.9; }

  /* ===== Sections ===== */
  main, section{ max-width:1080px; margin:0 auto; padding:110px 24px 30px; }
  .sec-head{ margin-bottom:64px; }
  .sec-label{
    display:inline-block; font-size:12px; font-weight:700; letter-spacing:0.1em;
    text-transform:uppercase; color:var(--hot); margin-bottom:14px;
  }
  .sec-head h2{
    font-family:'Unbounded'; font-weight:800;
    font-size:clamp(28px, 4.5vw, 52px); line-height:1.1; color:var(--heading);
  }

  /* ===== Projects ===== */
  .project{ margin-bottom:130px; }
  .proj-meta{ max-width:640px; margin-bottom:28px; }
  .idx{
    font-family:'Unbounded'; font-weight:800; font-size:15px;
    color:var(--primary);
    display:inline-block; margin-bottom:10px;
  }
  .project h3{
    font-family:'Unbounded'; font-weight:600;
    font-size:clamp(22px, 3.2vw, 34px); margin-bottom:10px;
  }
  .tags{ font-size:12px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--muted); margin-bottom:14px; }
  .blurb{ font-size:16px; line-height:1.7; }
  .proj-video video{
    width:100%; display:block; border-radius:14px;
    box-shadow:0 20px 60px rgba(40,32,74,0.25);
  }
  .mini-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; margin-top:14px;
  }
  .mini-grid figure{ position:relative; }
  .mini-grid video{ width:100%; display:block; border-radius:10px; }
  .mini-grid figcaption{
    margin-top:8px; font-size:11px; font-weight:600; letter-spacing:0.05em;
    text-transform:uppercase; color:var(--muted); text-align:center;
  }

  /* ===== Art ===== */
  .art-grid{
    display:grid; grid-template-columns:repeat(3, 1fr); gap:18px;
  }
  .art-grid figure.wide{ grid-column:span 2; }
  .art-grid img{
    width:100%; height:100%; object-fit:cover; aspect-ratio:4/3;
    border-radius:12px; display:block;
  }
  .art-grid figure.wide img{ aspect-ratio:auto; } /* the album spread shows uncropped */
  .art-grid figure.tall{ grid-row:span 2; display:flex; flex-direction:column; }
  .art-grid figure.tall img{ flex:1; min-height:0; aspect-ratio:auto; }
  .art-grid figcaption{
    margin-top:8px; font-size:12px; font-weight:600; color:var(--muted);
  }

  /* ===== Playground callout ===== */
  .playground-card{
    display:flex; align-items:center; justify-content:space-between; gap:28px;
    background:var(--surface); border:1px solid var(--line); border-radius:18px;
    padding:38px 40px; text-decoration:none; color:var(--ink);
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .playground-card:hover{ transform:translateY(-4px); box-shadow:0 20px 50px rgba(40,32,74,0.18); }
  .playground-card h3{
    font-family:'Unbounded'; font-weight:600;
    font-size:clamp(18px, 2.6vw, 26px); line-height:1.3;
    color:var(--heading); margin-bottom:10px;
  }
  .playground-card p{ font-size:14px; color:var(--muted); }
  .playground-go{
    flex-shrink:0; font-family:'Unbounded'; font-weight:600; font-size:16px;
    background:var(--highlight); color:#222; padding:14px 22px; border-radius:12px;
  }

  /* ===== Experience ===== */
  .xp-item{
    border-left:3px solid var(--secondary);
    padding-left:22px; margin-bottom:34px;
  }
  .xp-role{ font-family:'Unbounded'; font-weight:600; font-size:17px; margin-bottom:6px; color:var(--heading); }
  .xp-time{
    font-size:12px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--muted); margin-bottom:12px;
  }
  .xp-item p:last-child{ font-size:15px; line-height:1.7; margin-bottom:0; }

  /* ===== About ===== */
  .about-body{ max-width:680px; }
  .about-body p{ font-size:17px; line-height:1.75; margin-bottom:20px; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
  .chip{
    font-size:12px; font-weight:600; padding:6px 12px; border-radius:20px;
    background:var(--secondary); color:#28204a;
  }

  /* ===== Contact ===== */
  #contact{ padding-bottom:90px; }
  .btn{
    display:inline-block; background:var(--primary); color:#fff;
    text-decoration:none; font-size:15px; font-weight:600; padding:14px 28px;
    border-radius:10px; margin-bottom:26px;
    transition:transform .15s ease;
  }
  .btn:hover{ transform:translateY(-3px); }
  .contact-links{ display:flex; gap:24px; flex-wrap:wrap; }
  .contact-links a{ color:var(--heading); font-weight:600; text-decoration:none; font-size:15px; }
  .contact-links a:hover{ text-decoration:underline; }

  footer{
    max-width:1080px; margin:0 auto; padding:26px 24px 40px;
    display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
    border-top:1px solid var(--line);
    font-size:12px; color:var(--muted);
  }

  /* ===== Scroll reveal ===== */
  .reveal{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s ease; }
  .reveal.in-view{ opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){
    .reveal{ opacity:1; transform:none; transition:none; }
    html{ scroll-behavior:auto; }
  }

  /* ===== Confetti ===== */
  #confetti{ position:fixed; inset:0; width:100vw; height:100vh; pointer-events:none; z-index:3000; }

  @media (max-width:700px){
    #topbar nav a{ display:none; }
    .playground-card{ flex-direction:column; align-items:flex-start; padding:28px 24px; }
    .mini-grid{ grid-template-columns:repeat(2, 1fr); }
    .art-grid{ grid-template-columns:1fr; }
    .art-grid figure.wide{ grid-column:auto; }
    .art-grid figure.tall{ grid-row:auto; }
    .project{ margin-bottom:90px; }
    main, section{ padding:80px 20px 20px; }
  }