<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />
  <link rel="dns-prefetch" href="https://cdnjs.cloudflare.com" />
  <title>Anders Henrikson Photography</title>
  <link rel="stylesheet" href="styles/shared.css" />
  <style>
    /* ── Reset & Base ── */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --black: #ffffff;
      --off-black: #f5f5f5;
      --dark: #ebebeb;
      --mid: #d5d5d5;
      --light: #888888;
      --white: #1a1a1a;
      --accent: #5ab3cc;
      --font-sans: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    }
    html { scroll-behavior: smooth; }
    body {
      background: var(--black);
      color: var(--white);
      font-family: var(--font-sans);
      line-height: 1.5;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; }
    img { display: block; width: 100%; height: 100%; object-fit: cover; }
    picture { display: block; width: 100%; height: 100%; }

    /* ── Nav ── */
    nav {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 100;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 2.5rem;
      background: linear-gradient(to bottom, rgba(0,0,0,.85), transparent);
      border-bottom: 1px solid transparent;
      backdrop-filter: blur(0px);
      transition: background .3s, border-color .3s, backdrop-filter .3s;
    }
    nav.scrolled {
      background: rgba(10,10,10,.96);
      border-bottom-color: rgba(90,179,204,.15);
      backdrop-filter: blur(8px);
    }
    .nav-logo {
      font-size: 1rem;
      font-weight: 800;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--white);
      line-height: 1;
      display: flex;
      flex-direction: column;
    }
    .nav-logo .logo-first { font-size: .65rem; font-weight: 400; letter-spacing: .3em; color: var(--accent); margin-bottom: .1rem; }
    .nav-logo .logo-last  { font-size: 1rem; font-weight: 800; letter-spacing: .12em; color: var(--white); }
    .nav-links {
      display: flex;
      gap: 1.75rem;
      list-style: none;
      font-size: .65rem;
      letter-spacing: .15em;
      text-transform: uppercase;
    }
    .nav-links a { color: var(--light); transition: color .2s; }
    .nav-links a:hover { color: var(--white); }
    .nav-links a.active { color: var(--accent); }
    .nav-links .sep { color: var(--mid); user-select: none; }
    .nav-tagline { font-size: .5rem; letter-spacing: .2em; text-transform: uppercase; color: var(--light); margin-top: .15rem; }
    .nav-cta {
      font-size: .65rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      border: 1px solid var(--accent);
      color: var(--accent);
      padding: .4rem .9rem;
      transition: background .2s, color .2s;
    }
    .nav-cta:hover { background: var(--accent); color: var(--black); }

    /* ── Hero ── */
    #hero {
      position: relative;
      height: 100vh;
      min-height: 600px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 4rem 2.5rem;
      overflow: hidden;
    }
    .hero-bg {
      position: absolute;
      top: -20%;
      left: 0; right: 0;
      height: 140%;
      background: url('images/home-web/DSC06808.jpg') center/cover no-repeat;
    }
    .hero-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.85) 30%, rgba(0,0,0,.1) 100%);
    }
    .hero-content { position: relative; z-index: 1; max-width: 700px; }
    .hero-eyebrow {
      font-size: .65rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .75rem;
    }
    .hero-title {
      font-size: clamp(2.5rem, 7vw, 6rem);
      font-weight: 800;
      line-height: 1;
      letter-spacing: -.02em;
      margin-bottom: 1.25rem;
    }
    .hero-sub {
      font-size: 1rem;
      color: var(--light);
      max-width: 420px;
      margin-bottom: 2rem;
      line-height: 1.6;
    }
    .btn {
      display: inline-block;
      padding: .75rem 2rem;
      font-size: .7rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      font-weight: 700;
      transition: .2s;
    }
    .btn-primary { background: var(--accent); color: var(--white); }
    .btn-primary:hover { background: #3d96ae; }
    .btn-ghost {
      border: 1px solid var(--light);
      color: var(--light);
      margin-left: 1rem;
    }
    .btn-ghost:hover { border-color: var(--white); color: var(--white); }
    .hero-scroll {
      position: absolute;
      bottom: 2rem;
      right: 2.5rem;
      z-index: 1;
      font-size: .6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--light);
      writing-mode: vertical-rl;
      display: flex;
      align-items: center;
      gap: .5rem;
    }
    .hero-scroll::before {
      content: '';
      width: 1px;
      height: 40px;
      background: var(--light);
      display: block;
    }

    /* ── Section base ── */
    section { padding: 5rem 2.5rem; }
    .section-label {
      font-size: .65rem;
      letter-spacing: .25em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .75rem;
    }
    .section-title {
      font-size: clamp(1.75rem, 4vw, 3rem);
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1.1;
    }


    /* ── Portfolio ── */
    #portfolio { background: var(--off-black); }
    .portfolio-header {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      margin-bottom: 2.5rem;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .portfolio-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      grid-template-rows: 320px 320px;
      gap: .5rem;
    }
    .portfolio-item {
      position: relative;
      overflow: hidden;
      cursor: pointer;
    }
    .portfolio-item:nth-child(1) { grid-column: span 7; }
    .portfolio-item:nth-child(2) { grid-column: span 5; }
    .portfolio-item:nth-child(3) { grid-column: span 4; }
    .portfolio-item:nth-child(4) { grid-column: span 4; }
    .portfolio-item:nth-child(5) { grid-column: span 4; }
    .portfolio-item:nth-child(6) { grid-column: span 12; }
    .portfolio-item img { transition: transform .5s ease; }
    .portfolio-item:hover img { transform: scale(1.04); }
    .portfolio-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%);
      opacity: 0;
      transition: opacity .3s;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 1.25rem;
    }
    .portfolio-item:hover .portfolio-overlay { opacity: 1; }
    .portfolio-cat {
      font-size: .6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: .25rem;
    }
    .portfolio-name {
      font-size: .9rem;
      font-weight: 700;
    }

    /* ── Categories ── */
    #categories { background: var(--black); }
    .categories-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: .5rem;
      margin-top: 2.5rem;
    }
    .category-card {
      position: relative;
      height: 460px;
      overflow: hidden;
      cursor: pointer;
    }
    .category-card img { height: 130%; margin-top: -15%; transition: transform .6s ease; }
    .category-card:hover img { transform: scale(1.05); }
    .category-info {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,.75) 40%, transparent 100%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 2rem;
    }
    .category-num {
      font-size: .65rem;
      letter-spacing: .2em;
      color: var(--accent);
      margin-bottom: .4rem;
    }
    .category-title {
      font-size: 1.75rem;
      font-weight: 800;
      letter-spacing: -.02em;
      margin-bottom: .5rem;
    }
    .category-count {
      font-size: .65rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--light);
    }
    .category-arrow {
      position: absolute;
      top: 1.5rem;
      right: 1.5rem;
      width: 2.5rem;
      height: 2.5rem;
      border: 1px solid rgba(255,255,255,.3);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1rem;
      opacity: 0;
      transform: translateY(6px);
      transition: opacity .3s, transform .3s;
    }
    .category-card:hover .category-arrow { opacity: 1; transform: translateY(0); }

    /* ── About ── */
    #about { background: var(--black); }
    .about-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
      margin-top: 3rem;
    }
    .about-img-wrap { position: relative; height: 580px; overflow: hidden; }
    .about-img-wrap img { height: 130%; margin-top: -15%; }
    .about-img-accent {
      position: absolute;
      bottom: -1rem;
      right: -1rem;
      width: 60%;
      height: 60%;
      border: 2px solid var(--accent);
      z-index: -1;
    }
    .about-body { display: flex; flex-direction: column; gap: 1.25rem; }
    .about-body p { color: var(--light); line-height: 1.8; font-size: .95rem; }

    /* ── Contact ── */
    #contact {
      background: var(--dark);
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: start;
    }
    .contact-left { display: flex; flex-direction: column; gap: 1rem; }
    .contact-left p { color: var(--light); line-height: 1.7; font-size: .95rem; }
    .contact-detail {
      display: flex;
      flex-direction: column;
      gap: .25rem;
      border-top: 1px solid var(--mid);
      padding-top: 1.25rem;
    }
    .contact-detail-label {
      font-size: .6rem;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: var(--accent);
    }
    .contact-detail-val { font-size: .9rem; font-weight: 700; }
    form { display: flex; flex-direction: column; gap: 1rem; }
    .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
    input, textarea, select {
      background: var(--mid);
      border: 1px solid transparent;
      color: var(--white);
      font-family: var(--font-sans);
      font-size: .85rem;
      padding: .85rem 1rem;
      width: 100%;
      outline: none;
      transition: border-color .2s;
    }
    input::placeholder, textarea::placeholder { color: #666; }
    input:focus, textarea:focus, select:focus { border-color: var(--accent); }
    textarea { resize: vertical; min-height: 130px; }
    select { appearance: none; cursor: pointer; }
    select option { background: var(--dark); }
    form button[type="submit"] {
      background: var(--accent);
      color: #fff;
      padding: .85rem 2rem;
      font-family: var(--font-sans);
      font-size: .7rem;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      border: none;
      cursor: pointer;
      transition: background .2s;
      visibility: visible !important;
      opacity: 1 !important;
    }
    form button[type="submit"]:hover { background: #3d96ae; }

    /* ── Footer ── */
    footer {
      background: var(--off-black);
      padding: 2rem 2.5rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-top: 1px solid var(--mid);
      flex-wrap: wrap;
      gap: 1rem;
    }
    .footer-logo { font-size: .7rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
    .footer-copy { font-size: .65rem; color: var(--light); }
    .social-links { display: flex; gap: 1.25rem; }
    .social-links a {
      font-size: .65rem;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--light);
      transition: color .2s;
    }
    .social-links a:hover { color: var(--white); }

    /* ── Responsive ── */
    @media (max-width: 900px) {
      nav { padding: 1rem 1.25rem; }
      .nav-links { display: none; }
      #hero { padding: 3rem 1.25rem; }
      section { padding: 3.5rem 1.25rem; }
      .portfolio-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
      }
      .portfolio-item:nth-child(n) { grid-column: span 1; }
      .portfolio-item:nth-child(1) { grid-column: span 2; }
      .categories-grid { grid-template-columns: 1fr; }
      .category-card { height: 320px; }
      .about-grid { grid-template-columns: 1fr; gap: 2rem; }
      .about-img-wrap { height: 320px; }
      #contact { grid-template-columns: 1fr; gap: 2.5rem; padding: 3.5rem 1.25rem; }
      .form-row { grid-template-columns: 1fr; }
      footer { flex-direction: column; align-items: flex-start; }
    }

    /* ── Events dropdown ── */
    .nav-dropdown { position: relative; list-style: none; }
    .nav-dropdown > a { color: var(--light); transition: color .2s; cursor: default; display: flex; align-items: center; gap: .25rem; }
    .nav-dropdown > a:hover, .nav-dropdown:hover > a { color: var(--white); }
    .nav-dropdown > a.active { color: var(--accent); }
    .dropdown-menu {
      position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding-top: .6rem;
      background: rgba(10,10,10,.97); border: 1px solid rgba(90,179,204,.2);
      min-width: 130px; padding: .4rem 0; display: none; flex-direction: column; z-index: 300;
    }
    .nav-dropdown:hover .dropdown-menu { display: flex; }
    .dropdown-menu a { font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; color: var(--light); padding: .55rem 1.1rem; transition: color .2s; white-space: nowrap; }
    .dropdown-menu a:hover { color: var(--white); }
    .dropdown-menu a.active { color: var(--accent); }
    /* ── Light-theme overrides ── */
    .nav-logo .logo-last  { color: #fff; }
    .nav-tagline          { color: rgba(255,255,255,.55); }
    .nav-links a          { color: rgba(255,255,255,.75); }
    .nav-links a:hover    { color: #fff; }
    .nav-links .sep       { color: rgba(255,255,255,.25); }
    .nav-dropdown > a     { color: rgba(255,255,255,.75); }
    .nav-dropdown > a:hover, .nav-dropdown:hover > a { color: #fff; }
    .dropdown-menu        { background: rgba(255,255,255,.98); border: 1px solid rgba(90,179,204,.3); }
    .dropdown-menu a      { color: #555; }
    .dropdown-menu a:hover{ color: #111; }
    .dropdown-menu a.active { color: var(--accent); }
    .btn-primary          { color: #fff; }
    .btn-ghost            { border-color: #aaa; color: #555; }
    .btn-ghost:hover      { border-color: #111; color: #111; }
    .hero-title           { color: #fff; }
    .hero-sub             { color: rgba(255,255,255,.8); }
    .hero-scroll          { color: rgba(255,255,255,.65); }
    .hero-scroll::before  { background: rgba(255,255,255,.65); }
    .portfolio-overlay    { color: #fff; }
    .category-title       { color: #fff; }
    .category-count       { color: rgba(255,255,255,.75); }
  
    /* ── Side Nav ── */
    .sidenav {
      position: fixed; top: 0; left: 0; bottom: 0; width: 240px;
      background: #fff; border-right: 1px solid #e8e8e8;
      display: flex; flex-direction: column; z-index: 1000;
      transition: transform .3s ease; overflow-y: auto;
    }
    /* Logo */
    .sidenav-logo { padding: 1.5rem 1.5rem 1.25rem; border-bottom: 1px solid #efefef; display: block; }
    .sidenav-logo .logo-first { font-size: .55rem; font-weight: 400; letter-spacing: .3em; color: var(--accent); text-transform: uppercase; display: block; }
    .sidenav-logo .logo-last  { font-size: 1rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #111; margin-top: .15rem; display: block; }
    .sidenav-logo .logo-tag   { font-size: .48rem; letter-spacing: .18em; text-transform: uppercase; color: #bbb; margin-top: .3rem; display: block; }
    /* Section label */
    .sidenav-section-label { font-size: .48rem; letter-spacing: .28em; text-transform: uppercase; color: #ccc; padding: 1.25rem 1.5rem .4rem; display: block; }
    /* Top-level links */
    .sidenav-links { list-style: none; display: flex; flex-direction: column; }
    .sidenav-links a {
      display: block; padding: .5rem 1.5rem;
      font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: #666; font-weight: 500;
      transition: color .15s, background .15s; border-left: 2px solid transparent;
    }
    .sidenav-links a:hover { color: #111; background: #f7f7f7; }
    .sidenav-links a.active { color: #111; border-left-color: var(--accent); background: rgba(90,179,204,.05); font-weight: 700; }
    /* Group toggles — look like section headers */
    .sidenav-group { display: flex; flex-direction: column; margin-top: .5rem; }
    .sidenav-group-toggle {
      display: flex; align-items: center; justify-content: space-between; padding: .6rem 1.5rem;
      font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #555; font-weight: 700;
      cursor: pointer; transition: color .15s, background .15s; user-select: none;
      border: none; background: transparent; width: 100%; text-align: left; font-family: inherit;
    }
    .sidenav-group-toggle:hover { color: #111; background: #f5f5f5; }
    .sidenav-group-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .sidenav-group-toggle .tgl-left { display: flex; align-items: center; gap: .4rem; }
    .sidenav-group-toggle .chevron { font-size: .85rem; line-height: 1; transition: transform .2s; color: #999; transform: rotate(90deg); }
    .sidenav-group-toggle.collapsed .chevron { transform: rotate(0); color: #bbb; }
    /* Sub-links */
    .sidenav-sub { display: flex; flex-direction: column; list-style: none; }
    .sidenav-sub.collapsed { display: none; }
    .sidenav-sub li { list-style: none; }
    .sidenav-sub a {
      display: block; padding: .4rem 1rem .4rem 2.25rem; font-size: .62rem; letter-spacing: .05em;
      text-transform: uppercase; color: #888; transition: color .15s; border-left: 2px solid transparent;
      position: relative; white-space: nowrap;
    }
    .sidenav-sub a::before { content: ''; position: absolute; left: 1.5rem; top: 50%; width: 5px; height: 1px; background: #ddd; }
    .sidenav-sub a:hover { color: #222; }
    .sidenav-sub a:hover::before { background: #aaa; }
    .sidenav-sub a.active { color: #111; border-left-color: var(--accent); font-weight: 600; }
    .sidenav-sub a.active::before { background: var(--accent); }
    /* Divider */
    .sidenav-divider { border: none; border-top: 1px solid #f0f0f0; margin: .75rem 1.5rem .25rem; }
    /* Utility links (Locations, About) */
    .sidenav-util { list-style: none; display: flex; flex-direction: column; }
    .sidenav-util a {
      display: block; padding: .4rem 1.5rem; font-size: .6rem; letter-spacing: .12em;
      text-transform: uppercase; color: #bbb; transition: color .15s;
    }
    .sidenav-util a:hover { color: #555; }
    .sidenav-util a.active { color: var(--accent); }
    /* Footer CTA */
    .sidenav-footer { margin-top: auto; padding: 1.25rem 1.5rem; border-top: 1px solid #efefef; }
    .sidenav-footer a {
      display: block; font-size: .6rem; letter-spacing: .15em; text-transform: uppercase;
      text-align: center; border: 1px solid var(--accent); color: var(--accent);
      padding: .6rem; transition: background .2s, color .2s;
    }
    .sidenav-footer a:hover { background: var(--accent); color: #fff; }
    /* Mobile */
    .sidenav-toggle {
      display: none; position: fixed; top: 1rem; left: 1rem; z-index: 1100;
      background: #fff; border: 1px solid #ddd; color: #111;
      width: 2.5rem; height: 2.5rem; align-items: center; justify-content: center;
      font-size: 1.1rem; cursor: pointer; font-family: inherit;
    }
    .sidenav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 999; }
    @media (max-width: 860px) {
      .sidenav { transform: translateX(-100%); }
      .sidenav.open { transform: translateX(0); }
      .sidenav-toggle { display: flex; }
      .sidenav-overlay.open { display: block; }
      body { margin-left: 0 !important; }
    }
    body { margin-left: 240px; }

  </style>
</head>
<body>

<button class="sidenav-toggle" id="sidenav-toggle" aria-label="Menu">&#9776;</button>
<div class="sidenav-overlay" id="sidenav-overlay"></div>
<nav class="sidenav" id="sidenav" aria-label="Primary">
  <a href="index.html" class="sidenav-logo">
    <div class="logo-first">Anders</div>
    <div class="logo-last">Henrikson</div>
    <div class="logo-tag">Salt Lake City, UT</div>
  </a>
  <span class="sidenav-section-label">Portfolio</span>
  <ul class="sidenav-links">
    <li><a href="index.html" class="active" aria-current="page">Overview</a></li>
  </ul>
  <div class="sidenav-group">
    <div class="sidenav-group-toggle" data-group="personal">
      <span class="tgl-left">Personal</span><span class="chevron">&#8250;</span>
    </div>
    <ul class="sidenav-sub" id="snav-personal">
      <li><a href="skiing.html">Skiing</a></li>
      <li><a href="bikes.html">Bikes</a></li>
      <li><a href="landscape.html">Landscape</a></li>
    </ul>
  </div>
  <div class="sidenav-group">
    <div class="sidenav-group-toggle" data-group="events">
      <span class="tgl-left">Events</span><span class="chevron">&#8250;</span>
    </div>
    <ul class="sidenav-sub" id="snav-events">
      <li><a href="xgames.html">X Games</a></li>
      <li><a href="xgames-slc.html">X-Games SLC</a></li>
      <li><a href="kingsqueens.html">Kings &amp; Queens</a></li>
      <li><a href="rampage.html">Rampage</a></li>
      <li><a href="cascade.html">Cascade</a></li>
    </ul>
  </div>
  <div class="sidenav-group">
    <div class="sidenav-group-toggle" data-group="commissioned">
      <span class="tgl-left">Commissioned</span><span class="chevron">&#8250;</span>
    </div>
    <ul class="sidenav-sub" id="snav-commissioned">
      <li><a href="powhub.html">Powhub</a></li>
      <li><a href="kali.html">Kali Protectives</a></li>
    </ul>
  </div>
  <hr class="sidenav-divider">
  <ul class="sidenav-util">
    <li><a href="map.html">Locations</a></li>
    <li><a href="index.html#about">About</a></li>
  </ul>
  <div class="sidenav-footer">
    <a href="index.html#contact">Work With Me</a>
  </div>
</nav>

<!-- ── Hero ── -->
<section id="hero">
  <div class="hero-bg"></div>
  <div class="hero-overlay"></div>
  <div class="hero-content">
    <p class="hero-eyebrow">Salt Lake City, UT &nbsp;·&nbsp; Outdoor &amp; Action Sports</p>
    <h1 class="hero-title">Anders<br>Henrikson.</h1>
    <p class="hero-sub">
      Photography delivered with quality and efficiency.
      Based in the Salt Lake Area — available beyond.
    </p>
    <a href="#portfolio" class="btn btn-primary">View Portfolio</a>
    <a href="#contact" class="btn btn-ghost">Work With Me</a>
  </div>
  <span class="hero-scroll">Scroll</span>
</section>


<!-- ── Portfolio ── -->
<section id="portfolio">
  <div class="portfolio-header">
    <div>
      <p class="section-label">Selected Work</p>
      <h2 class="section-title">Highlighted Projects</h2>
    </div>
    <a href="#categories" class="btn btn-ghost">View All</a>
  </div>
  <div class="portfolio-grid">
    <a href="xgames.html" class="portfolio-item">
      <picture>
          <source type="image/webp"
            srcset="images-optimized/xgames-web/DSC05062-small.webp 600w,
            images-optimized/xgames-web/DSC05062-medium.webp 1200w,
            images-optimized/xgames-web/DSC05062-large.webp 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" />
          <img src="images-optimized/xgames-web/DSC05062-medium.jpg"
            srcset="images-optimized/xgames-web/DSC05062-small.jpg 600w,
            images-optimized/xgames-web/DSC05062-medium.jpg 1200w,
            images-optimized/xgames-web/DSC05062-large.jpg 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
            alt="X Games Aspen 2025" loading="lazy" width="1920" height="1280" />
        </picture>
      <div class="portfolio-overlay">
        <span class="portfolio-cat">Skiing</span>
        <span class="portfolio-name">X Games Aspen 2025</span>
      </div>
    </a>
    <a href="kingsqueens.html" class="portfolio-item">
      <picture>
          <source type="image/webp"
            srcset="images-optimized/kingsqueens-web/7E2A7656%20copy-small.webp 600w,
            images-optimized/kingsqueens-web/7E2A7656%20copy-medium.webp 1200w,
            images-optimized/kingsqueens-web/7E2A7656%20copy-large.webp 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" />
          <img src="images-optimized/kingsqueens-web/7E2A7656%20copy-medium.jpg"
            srcset="images-optimized/kingsqueens-web/7E2A7656%20copy-small.jpg 600w,
            images-optimized/kingsqueens-web/7E2A7656%20copy-medium.jpg 1200w,
            images-optimized/kingsqueens-web/7E2A7656%20copy-large.jpg 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
            alt="Kings and Queens of Corbets 2026" loading="lazy" width="2000" height="1334" />
        </picture>
      <div class="portfolio-overlay">
        <span class="portfolio-cat">Event</span>
        <span class="portfolio-name">Kings &amp; Queens of Corbets 2026</span>
      </div>
    </a>
    <a href="rampage.html" class="portfolio-item">
      <picture>
          <source type="image/webp"
            srcset="images-optimized/rampage-web/RedBullRampage1-small.webp 600w,
            images-optimized/rampage-web/RedBullRampage1-medium.webp 1200w,
            images-optimized/rampage-web/RedBullRampage1-large.webp 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" />
          <img src="images-optimized/rampage-web/RedBullRampage1-medium.jpg"
            srcset="images-optimized/rampage-web/RedBullRampage1-small.jpg 600w,
            images-optimized/rampage-web/RedBullRampage1-medium.jpg 1200w,
            images-optimized/rampage-web/RedBullRampage1-large.jpg 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
            alt="Red Bull Rampage 2024" loading="lazy" width="1920" height="1280" />
        </picture>
      <div class="portfolio-overlay">
        <span class="portfolio-cat">Bikes</span>
        <span class="portfolio-name">Red Bull Rampage 2024</span>
      </div>
    </a>
    <a href="cascade.html" class="portfolio-item">
      <picture>
          <source type="image/webp"
            srcset="images-optimized/cascade-web/ANOTHA14-small.webp 600w,
            images-optimized/cascade-web/ANOTHA14-medium.webp 1200w,
            images-optimized/cascade-web/ANOTHA14-large.webp 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" />
          <img src="images-optimized/cascade-web/ANOTHA14-medium.jpg"
            srcset="images-optimized/cascade-web/ANOTHA14-small.jpg 600w,
            images-optimized/cascade-web/ANOTHA14-medium.jpg 1200w,
            images-optimized/cascade-web/ANOTHA14-large.jpg 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
            alt="Red Bull Cascade 2025" loading="lazy" width="1920" height="1280" />
        </picture>
      <div class="portfolio-overlay">
        <span class="portfolio-cat">Skiing</span>
        <span class="portfolio-name">Red Bull Cascade 2025</span>
      </div>
    </a>
    <a href="skiing.html" class="portfolio-item">
      <picture>
          <source type="image/webp"
            srcset="images-optimized/skiing-web/skiing1-small.webp 600w,
            images-optimized/skiing-web/skiing1-medium.webp 1200w,
            images-optimized/skiing-web/skiing1-large.webp 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" />
          <img src="images-optimized/skiing-web/skiing1-medium.jpg"
            srcset="images-optimized/skiing-web/skiing1-small.jpg 600w,
            images-optimized/skiing-web/skiing1-medium.jpg 1200w,
            images-optimized/skiing-web/skiing1-large.jpg 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
            alt="Backcountry Skiing" loading="lazy" width="1920" height="1280" />
        </picture>
      <div class="portfolio-overlay">
        <span class="portfolio-cat">Skiing</span>
        <span class="portfolio-name">Skiing in the Wasatch</span>
      </div>
    </a>
  </div>
</section>

<!-- ── Categories ── -->
<section id="categories">
  <p class="section-label">Disciplines</p>
  <h2 class="section-title">What I Shoot</h2>
  <div class="categories-grid">
    <a href="skiing.html" class="category-card">
      <img src="images-optimized/skiing-web/DSC01885-2-large.jpg" alt="Backcountry skier on a snowy ridge" loading="lazy" />
      <div class="category-info">
        <span class="category-num">01</span>
        <h3 class="category-title">Skiing</h3>
        <span class="category-count">Inbounds · Event · Backcountry</span>
      </div>
    </a>
    <a href="bikes.html" class="category-card">
      <img src="images/bikes-web/DSC05790-category.jpeg" alt="Mountain biker mid-jump on a trail" loading="lazy" />
      <div class="category-info">
        <span class="category-num">02</span>
        <h3 class="category-title">Bikes</h3>
        <span class="category-count">Downhill · Enduro · Freeride</span>
      </div>
    </a>
    <a href="landscape.html" class="category-card">
      <img src="images-optimized/landscape-web/DSC04073-large.jpg" alt="Mountain landscape at golden hour" loading="lazy" />
      <div class="category-info">
        <span class="category-num">03</span>
        <h3 class="category-title">Landscape</h3>
        <span class="category-count">Mountain · Desert · Alpine</span>
      </div>
    </a>
  </div>
</section>

<!-- ── About ── -->
<section id="about">
  <div class="about-grid">
    <div class="about-img-wrap">
      <picture>
          <source type="image/webp"
            srcset="images-optimized/portrait-web/2R7A5171-small.webp 600w,
            images-optimized/portrait-web/2R7A5171-medium.webp 1200w,
            images-optimized/portrait-web/2R7A5171-large.webp 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw" />
          <img src="images-optimized/portrait-web/2R7A5171-medium.jpg"
            srcset="images-optimized/portrait-web/2R7A5171-small.jpg 600w,
            images-optimized/portrait-web/2R7A5171-medium.jpg 1200w,
            images-optimized/portrait-web/2R7A5171-large.jpg 2000w"
            sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
            alt="Anders Henrikson" loading="lazy" width="1812" height="1920" />
        </picture>
      <div class="about-img-accent"></div>
    </div>
    <div class="about-body">
      <div>
        <p class="section-label">About</p>
        <h2 class="section-title">Anders<br>Henrikson</h2>
      </div>
      <p>
        Anders is an up-and-coming outdoor photographer based in Salt Lake City and
        from Nederland, Colorado. Anders is shooting anything related to bikes, snow,
        and everything in between. He also really enjoys a good sandwich, specifically
        from Caputos.
      </p>
      <p>
        Anders also prides in his ability to meet deadlines and deliver, every single time.
      </p>
    </div>
  </div>
</section>

<!-- ── Contact ── -->
<section id="contact">
  <div class="contact-left">
    <div>
      <p class="section-label">Work With Me</p>
      <h2 class="section-title">Let's Make<br>Something.</h2>
    </div>
    <p>
      Looking for event coverage or a brand campaign? I'm always
      open to new projects. Fill out the form or reach out directly.
    </p>
    <div class="contact-detail">
      <span class="contact-detail-label">Location</span>
      <span class="contact-detail-val">Salt Lake City, UT</span>
    </div>
    <div class="contact-detail">
      <span class="contact-detail-label">Email</span>
      <span class="contact-detail-val">Andershenriksonphoto@gmail.com</span>
    </div>
    <div class="contact-detail">
      <span class="contact-detail-label">Response Time</span>
      <span class="contact-detail-val">Within 24 hours</span>
    </div>
  </div>
  <form id="contact-form">
    <div class="form-row">
      <input type="text" name="firstName" placeholder="First Name" required />
      <input type="text" name="lastName" placeholder="Last Name" required />
    </div>
    <input type="email" name="email" placeholder="Email Address" required />
    <select name="projectType" required>
      <option value="" disabled selected>Project Type</option>
      <option value="Event Coverage">Event Coverage</option>
      <option value="Brand / Commercial">Brand / Commercial</option>
      <option value="Editorial">Editorial</option>
      <option value="Other">Other</option>
    </select>
    <textarea name="message" placeholder="Tell me about your project…" required></textarea>
    <button type="submit" class="btn btn-primary" style="cursor:pointer;border:none;">
      Send Message
    </button>
  </form>
</section>

<!-- ── Footer ── -->
<footer>
  <span class="footer-logo">Photoders.com</span>
  <span class="footer-copy">© 2026 Anders Henrikson. All rights reserved.</span>
  <div class="social-links">
    <a href="https://instagram.com/photoders" target="_blank" rel="noopener">Instagram</a>
    <a href="https://www.linkedin.com/in/anders-henrikson-74623b291/" target="_blank" rel="noopener">LinkedIn</a>
  </div>
</footer>

<!-- ── GSAP + ScrollTrigger from CDN ── -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js" defer></script>

<script>
  document.addEventListener('DOMContentLoaded', function() {
  gsap.registerPlugin(ScrollTrigger);

  // ── Hero parallax
  gsap.to('.hero-bg', {
    scrollTrigger: {
      trigger: '#hero',
      start: 'top top',
      end: 'bottom top',
      scrub: true
    },
    y: '25%',
    ease: 'none'
  });

  // ── Category card image parallax
  document.querySelectorAll('.category-card').forEach(card => {
    gsap.to(card.querySelector('img'), {
      scrollTrigger: {
        trigger: card,
        start: 'top bottom',
        end: 'bottom top',
        scrub: true
      },
      y: '20%',
      ease: 'none'
    });
  });

  // ── About image parallax
  gsap.to('.about-img-wrap img', {
    scrollTrigger: {
      trigger: '.about-img-wrap',
      start: 'top bottom',
      end: 'bottom top',
      scrub: true
    },
    y: '20%',
    ease: 'none'
  });



  // ── Hero sequence
  const heroTl = gsap.timeline({ delay: 0.4 });
  heroTl
    .from('.hero-eyebrow', { y: 24, autoAlpha: 0, duration: 0.6, ease: 'power3.out' })
    .from('.hero-title',   { y: 48, autoAlpha: 0, duration: 0.8, ease: 'power3.out' }, '-=0.3')
    .from('.hero-sub',     { y: 24, autoAlpha: 0, duration: 0.6, ease: 'power3.out' }, '-=0.4')
    .from('#hero .btn',    { y: 20, autoAlpha: 0, duration: 0.5, stagger: 0.12, ease: 'power3.out' }, '-=0.3')
    .from('.hero-scroll',  { autoAlpha: 0, duration: 0.5 }, '-=0.2');

  // ── Portfolio
  gsap.from('.portfolio-header', {
    scrollTrigger: { trigger: '#portfolio', start: 'top 80%' },
    y: 30, autoAlpha: 0, duration: 0.7, ease: 'power3.out'
  });
  gsap.from('.portfolio-item', {
    scrollTrigger: { trigger: '.portfolio-grid', start: 'top 85%' },
    y: 60, autoAlpha: 0, duration: 0.7, stagger: 0.1, ease: 'power3.out'
  });

  // ── Categories
  gsap.from(['#categories .section-label', '#categories .section-title'], {
    scrollTrigger: { trigger: '#categories', start: 'top 80%' },
    y: 30, autoAlpha: 0, duration: 0.7, stagger: 0.15, ease: 'power3.out'
  });
  gsap.from('.category-card', {
    scrollTrigger: { trigger: '.categories-grid', start: 'top 85%' },
    y: 70, autoAlpha: 0, scale: 0.95, duration: 0.9, stagger: 0.15, ease: 'power3.out'
  });

  // ── About
  gsap.from('.about-img-wrap', {
    scrollTrigger: { trigger: '#about', start: 'top 75%' },
    x: -80, autoAlpha: 0, duration: 1.0, ease: 'power3.out'
  });
  gsap.from('.about-body > *', {
    scrollTrigger: { trigger: '#about', start: 'top 75%' },
    x: 80, autoAlpha: 0, duration: 0.9, stagger: 0.15, ease: 'power3.out'
  });

  // ── Contact
  gsap.from('.contact-left > *', {
    scrollTrigger: { trigger: '#contact', start: 'top 80%' },
    x: -40, autoAlpha: 0, duration: 0.7, stagger: 0.1, ease: 'power3.out'
  });
  gsap.from('form > :not(button)', {
    scrollTrigger: { trigger: '#contact', start: 'top 80%' },
    y: 24, autoAlpha: 0, duration: 0.5, stagger: 0.08, ease: 'power3.out'
  });

  // ── Contact form submit
  async function handleSubmit(e) {
    e.preventDefault();
    const form = e.target;
    const btn = form.querySelector('button[type="submit"]');
    const originalText = btn.textContent;

    btn.textContent = 'Sending...';
    btn.disabled = true;
    btn.style.opacity = '0.7';

    const existingError = form.querySelector('.form-error');
    if (existingError) existingError.remove();

    const data = {
      firstName: form.firstName.value,
      lastName: form.lastName.value,
      email: form.email.value,
      projectType: form.projectType.value,
      message: form.message.value,
    };

    try {
      const res = await fetch('/api/contact', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(data),
      });

      const result = await res.json();

      if (!res.ok) {
        throw new Error(result.error || 'Something went wrong');
      }

      btn.textContent = 'Message Sent \u2713';
      btn.style.background = '#1e7a3c';
      btn.style.opacity = '1';
      setTimeout(() => {
        btn.textContent = originalText;
        btn.style.background = '';
        btn.disabled = false;
        form.reset();
      }, 4000);

    } catch (err) {
      btn.textContent = originalText;
      btn.style.opacity = '1';
      btn.disabled = false;

      const errorDiv = document.createElement('div');
      errorDiv.className = 'form-error';
      errorDiv.style.cssText = 'color:#e74c3c;font-size:.8rem;margin-top:.5rem;';
      errorDiv.textContent = err.message === 'Failed to fetch'
        ? 'Network error. Please check your connection and try again.'
        : err.message;
      btn.insertAdjacentElement('afterend', errorDiv);

      setTimeout(() => errorDiv.remove(), 6000);
    }
  }
  document.getElementById('contact-form').addEventListener('submit', handleSubmit);
  // Sidenav handled by shared.js
  });
</script>
<script src="scripts/shared.js" defer></script>
</body>
</html>
