/* ============================================================
   Andreas Petrovits — Portfolio Site Stylesheet
   ============================================================
   Structure (search for these section markers to jump around):

   1. Design tokens (:root)            — colors, spacing, sizing
   2. Global resets & base elements    — *, body, a, headings
   3. Keyframe animations
   4. Logo lockup
   5. Hero section
   6. Featured work / projects
   7. Media frames (browser chrome, phone mockups)
   8. Footer
   9. Responsive breakpoints (tablet, mobile)
   10. Accessibility (prefers-reduced-motion)

   To customise colors: edit the CSS variables in :root at the top.
   To customise spacing: --pad and --maxw in :root control the
   global horizontal padding and max content width.
   ============================================================ */

  :root{
    --accent:#7C2CDD; --accent-deep:#4A0F96; --accent-lift:#8F45E8; --accent-soft:#A46BF5;
    --ink:#141414; --paper:#F5F5F5; --body:#3B3835; --muted:#6E6A66;
    --ink-dim:#B9B4AE; --ink-faint:#8C8781; --frame:#EAE7E3;
    --pad:clamp(24px,5vw,80px); --maxw:1680px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--paper);color:var(--body);font-family:"Public Sans",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
  img{display:block;max-width:100%}
  a{color:var(--accent);text-decoration:none}
  a:hover{color:#5C17B0}
  h1,h2,h3{margin:0}
  p{margin:0}

  @keyframes logoHold{0%,43%{opacity:1}47%,93%{opacity:0}97%,100%{opacity:1}}
  @keyframes typeName{
    0%,46%{width:0;border-right-color:transparent}
    47%{width:0;border-right-color:var(--accent-soft)}
    62%,92%{width:var(--name-w);border-right-color:var(--accent-soft)}
    94%,100%{width:0;border-right-color:transparent}
  }
  @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}
  @keyframes nudge{0%,100%{transform:translateY(0);opacity:.6}50%{transform:translateY(7px);opacity:1}}

  /* ---------- logo lockup: mark ↔ typed name ---------- */
  .lockup{position:relative;height:48px;width:240px;--name-w:192px;flex:0 0 auto}
  .lockup svg{position:absolute;left:0;bottom:0;height:48px;width:auto;animation:logoHold 6s ease-in-out infinite}
  .lockup .name{position:absolute;left:0;bottom:5px;overflow:hidden;white-space:nowrap;border-right:2px solid transparent;animation:typeName 6s steps(16,end) infinite}
  .lockup .name span{font-family:"Bricolage Grotesque",sans-serif;font-size:23px;font-weight:700;letter-spacing:-.025em;color:var(--paper)}

  /* ---------- hero ---------- */
  .hero{position:relative;background:var(--ink);overflow:hidden;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;padding:clamp(28px,3.4vw,60px) 0 0;--gutter:calc(max(0px, 100% - var(--maxw)) / 2);--figh:min(88vh,820px,50vw);--figw:calc(var(--figh) * .6505)}
  .hero-ring{position:absolute;right:calc(var(--gutter) + var(--pad) - 90px);bottom:-90px;top:auto;transform:none;width:calc(var(--figw) * 1.78);aspect-ratio:1;border-radius:50%;border:1px solid rgba(124,44,221,.55);pointer-events:none}
  .hero-halo{position:absolute;right:calc(var(--gutter) + var(--pad) - 30px);bottom:0;top:auto;width:calc(var(--figw) * 1.34);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 45%,rgba(124,44,221,.85),rgba(124,44,221,.05) 70%);pointer-events:none}
  .hero-figure{position:absolute;right:calc(var(--gutter) + var(--pad));bottom:0;height:var(--figh);width:auto;pointer-events:none}
  .hero-inner{position:relative;display:flex;flex-direction:column;flex:1;width:100%;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad) clamp(24px,3vw,52px)}
  .hero-body{margin-top:auto;margin-bottom:auto;padding-top:clamp(28px,4vw,40px);max-width:min(830px, calc(100% - var(--figw) - 40px))}

  .badge{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(245,245,245,.2);color:#DAD6D1;padding:8px 15px 8px 12px;border-radius:999px;font-size:12.5px;font-weight:500;margin-bottom:clamp(22px,3vw,34px);line-height:1.35;white-space:nowrap;max-width:100%}
  .dot{flex:0 0 7px;height:7px;border-radius:50%;background:var(--accent-soft);animation:pulseDot 2.4s ease-in-out infinite}
  .dot-live{flex:0 0 7px;height:7px;border-radius:50%;background:#2ECC8F;animation:none}

  .hero h1{font-family:"Public Sans",sans-serif;font-weight:300;font-size:clamp(46px,7.4vw,104px);line-height:.96;letter-spacing:-.04em;color:var(--paper)}
  .hero h1 em{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-style:italic;color:var(--accent-soft)}
  .hero-intro{margin-top:clamp(20px,2.6vw,36px);max-width:34ch;font-size:clamp(16px,1.5vw,21px);line-height:1.55;color:var(--ink-dim);text-wrap:pretty}

  .cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(18px,2vw,24px);margin-top:clamp(26px,3.2vw,44px)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--accent);color:#fff;padding:16px 31px;min-height:48px;font-size:16px;font-weight:600;border-radius:15px;box-shadow:5px 7px 0 var(--accent-deep);transition:transform .14s ease,box-shadow .14s ease,background .18s ease}
  .btn:hover{background:var(--accent-lift);color:#fff;transform:translate(3px,3px);box-shadow:2px 4px 0 var(--accent-deep)}
  .btn-ink{background:var(--ink);color:var(--paper);box-shadow:5px 7px 0 #5C17B0}
  .btn-ink:hover{background:var(--accent);color:#fff;box-shadow:2px 4px 0 #5C17B0}
  .link-secondary{display:flex;gap:32px;font-size:15.5px;font-weight:500;color:#DAD6D1}
  .link-secondary a{color:#DAD6D1}
  .link-secondary a:hover{color:#fff}

  .hero-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:min(830px, calc(100% - var(--figw) - 40px));border-top:1px solid rgba(245,245,245,.14);padding-top:18px}
  .hero-foot .loc{display:inline-flex;align-items:center;gap:10px;font-size:14px;color:#DAD6D1}
  .hero-foot .loc strong{font-weight:600}
  .hero-foot .loc span.sep{color:var(--ink-faint)}
  .scroll-hint{display:inline-flex;align-items:center;gap:12px;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-faint)}
  .scroll-hint i{font-style:normal;color:var(--accent-soft);animation:nudge 2s ease-in-out infinite}

  /* ---------- featured work ---------- */
  .work{background:var(--paper);width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(56px,7vw,96px) var(--pad) clamp(64px,8vw,104px)}
  .work-head{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,60px);border-bottom:1px solid rgba(20,20,20,.18);padding-bottom:20px}
  .eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent)}
  .work h2{margin-top:14px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(34px,4.6vw,62px);line-height:1;letter-spacing:-.04em;color:var(--ink)}
  .work-note{max-width:34ch;font-size:16px;line-height:1.55;color:var(--body);text-align:right;flex:0 1 auto}

  .project{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(44px,6vw,72px)}
  .project + .project{margin-top:clamp(56px,8vw,104px)}
  .project.reverse .media{order:-1}
  .index-rule{display:flex;align-items:baseline;gap:16px}
  .index-rule b{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:700;color:var(--accent)}
  .index-rule i{flex:1;height:1px;background:rgba(20,20,20,.18)}
  .project h3{margin-top:20px;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(28px,3.4vw,46px);line-height:1.02;letter-spacing:-.035em;color:var(--ink)}
  .project .role{margin-top:8px;font-family:"Bricolage Grotesque",sans-serif;font-size:clamp(17px,1.8vw,24px);font-weight:500;letter-spacing:-.02em;color:var(--accent)}
  .project .desc{margin-top:22px;max-width:42ch;font-size:clamp(15px,1.3vw,18px);line-height:1.55;color:var(--body);text-wrap:pretty}
  .tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
  .tags span{font-size:13px;font-weight:500;color:var(--body);border:1px solid rgba(20,20,20,.22);padding:7px 13px;border-radius:999px}
  .project-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:32px}
  .project-cta .plain{font-size:15.5px;font-weight:500;color:var(--body)}
  .project-cta .plain:hover{color:var(--accent)}
  .soon{display:inline-flex;align-items:center;gap:10px;font-size:15.5px;font-weight:500;color:var(--muted)}
  .soon i{width:7px;height:7px;border-radius:50%;background:var(--accent);animation:pulseDot 2.4s ease-in-out infinite}
  .locked-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);border:1px solid rgba(20,20,20,.22);padding:7px 13px;border-radius:999px}

  .media{background:var(--frame);border:1px solid rgba(20,20,20,.14);border-radius:12px;padding:12px;box-shadow:0 18px 44px rgba(20,20,20,.12)}
  .chrome{display:flex;align-items:center;gap:10px;padding:2px 4px 12px}
  .chrome u{width:9px;height:9px;border-radius:50%;background:#D9D4CE}
  .chrome .url{margin-left:8px;flex:1;background:var(--paper);border-radius:999px;padding:5px 12px;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .chrome .loop{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
  .chrome .loop i{width:6px;height:6px;border-radius:50%;background:var(--accent);animation:pulseDot 2s ease-in-out infinite}
  .media figure{margin:0;border-radius:6px;overflow:hidden;aspect-ratio:808/632;background:#DEDAD5}
  .media img{width:100%;height:100%;object-fit:cover}

  .stage{background:#EDE6FA;border:1px solid rgba(124,44,221,.18);border-radius:6px;height:100%;display:flex;align-items:flex-end;justify-content:center;gap:clamp(12px,1.6vw,24px);padding:clamp(18px,2.4vw,30px) 20px 0}
  .phone{position:relative;flex:0 1 150px;max-width:150px;aspect-ratio:9/19.5;background:var(--ink);border-radius:22px;padding:5px;box-shadow:0 10px 22px rgba(20,20,20,.26)}
  .phone.lift{margin-bottom:clamp(14px,2vw,26px)}
  .phone .screen{width:100%;height:100%;border-radius:18px;overflow:hidden;background:#E4E0DB;display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;font-size:11px;line-height:1.45;color:var(--muted)}
  .phone .screen img{width:100%;height:100%;object-fit:cover}
  .phone::after{content:"";position:absolute;left:50%;top:9px;transform:translateX(-50%);width:34px;height:4px;border-radius:99px;background:rgba(245,245,245,.34)}
  .ph{display:flex;align-items:center;justify-content:center;text-align:center;padding:24px;background:#E1DDD8;border:1px dashed rgba(20,20,20,.28);border-radius:6px;color:var(--muted);font-size:13.5px;line-height:1.5;width:100%;height:100%}

  /* ---------- footer ---------- */
  .foot{background:var(--ink);color:var(--ink-dim);padding:clamp(44px,6vw,72px) var(--pad) clamp(28px,3vw,40px)}
  .foot-in{width:100%;max-width:calc(var(--maxw) - var(--pad) * 2);margin:0 auto}
  .foot-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:clamp(24px,4vw,48px);border-bottom:1px solid rgba(245,245,245,.14);padding-bottom:clamp(28px,3.4vw,40px)}
  .foot-cta{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:clamp(28px,3.6vw,46px);line-height:1.04;letter-spacing:-.035em;color:var(--paper);max-width:22ch}
  .foot-cta a{color:var(--accent-soft);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
  .foot-cta a:hover{color:var(--paper)}
  .foot-nav{display:flex;flex-wrap:wrap;gap:clamp(16px,2vw,28px);font-size:15px;font-weight:500}
  .foot-nav a{color:#DAD6D1}
  .foot-nav a:hover{color:#fff}
  .foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(22px,2.6vw,32px);font-size:13px;color:var(--ink-faint)}
  .foot-brand{display:inline-flex;align-items:center;gap:12px}
  .foot-bottom .lock{display:inline-flex;align-items:center;gap:12px}
  .foot-bottom .lock svg{height:32px;width:auto}
  .foot-bottom .lock span{font-family:"Bricolage Grotesque",sans-serif;font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--paper)}
  .to-top{color:#DAD6D1;font-weight:500}
  .to-top:hover{color:#fff}

  /* ---------- tablet ---------- */
  @media (max-width:1100px){
    .hero{min-height:0;padding-bottom:0;--gutter:0px}
    .hero-inner{width:100%;padding-bottom:calc(clamp(320px,42vw,480px) + 32px)}
    .hero-body{max-width:none}
    .hero-ring{display:none}
    .hero-halo{right:50%;top:auto;bottom:-70px;transform:translate(50%,0);width:min(560px,80vw)}
    .hero-figure{right:50%;transform:translateX(50%);height:clamp(320px,42vw,480px);width:auto}
    .media{max-width:620px}
    .hero-intro{max-width:52ch}
    .hero-foot{padding-right:0;max-width:none}
    .work-head{flex-direction:column;align-items:flex-start}
    .work-note{text-align:left;max-width:620px}
    .project{grid-template-columns:minmax(0,1fr)}
    .project.reverse .media{order:0}
    .project .media{margin-top:24px}
    .project .desc{max-width:620px}
  }
  /* ---------- mobile ---------- */
  @media (max-width:640px){
    .lockup{height:34px;width:170px;--name-w:133px}
    .lockup svg{height:34px}
    .lockup .name{bottom:3px}
    .lockup .name span{font-size:16px}
    .hero-inner{padding-bottom:calc(clamp(280px,68vw,380px) + 108px)}
    .hero-figure{bottom:42px;height:clamp(280px,68vw,380px);width:auto}
    .hero-halo{bottom:-10px;width:min(420px,108vw)}
    .cta-row{flex-direction:column;align-items:stretch;gap:40px}
    .btn{width:100%}
    .link-secondary{justify-content:center;gap:32px}
    .hero-foot{position:absolute;left:0;right:0;bottom:0;z-index:2;flex-direction:column;align-items:center;gap:12px;text-align:center;border-top:0;padding:18px 24px 20px;background:var(--ink)}
    .hero-foot .loc{font-size:12.5px}
    .scroll-hint{font-size:10.5px;letter-spacing:.16em}
    .project-cta{flex-direction:column;align-items:stretch;gap:18px}
    .project-cta .plain{text-align:center}
    .tags span{font-size:12px;padding:6px 11px}
    .foot-top{flex-direction:column;align-items:flex-start}
    .foot-bottom{flex-direction:column;align-items:center;gap:16px;text-align:center}
    .badge{font-size:11.5px;padding:7px 13px 7px 11px;gap:7px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
    .lockup svg{opacity:1}
    .lockup .name{width:auto;border-right-color:transparent}
  }