body {
    margin: 0rem;
    display: flex;
    flex-direction: column;
    /* Use a per-theme body color when provided, otherwise fall back to the desaturated --page-background-color */
    background-color: var(--body-surface-color, var(--page-background-color));
    position: relative;
}

:root {
    --debug-background-color: rgba(255, 0, 0, 0);
    --page-background-color: rgb(255, 255, 255);
    --card-gradient: linear-gradient(146deg, rgba(97, 197, 255, 1) 0%, rgba(10, 4, 71, 1) 100%);

    --sawtooth-fill-color: var(--page-background-color);
    --accent-color: black;
    --body-surface-color: var(--page-background-color);

    --theme-shadow: drop-shadow(0px 0px 20px rgb(117, 194, 230));

    --heading-z-index: 9999;
}

.intro p {
    position: absolute;
    top: 0;
    left: 3rem;
    color: white;
    mix-blend-mode: difference;
    font-family: geom;
    font-size: 2rem;
}


/* cursor */

* {
  cursor: none;
}

#cursor {
  position: fixed;
  width: 10px;
  height: 10px;
  background: white;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: difference;
}

/* theme transition */

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  z-index: 1;
}

::view-transition-new(root) {
  z-index: 2;
  clip-path: circle(0px at var(--transition-x, 50%) var(--transition-y, 50%));
  animation: circle-reveal 0.7s ease-in-out forwards;
}

@keyframes circle-reveal {
  to {
    clip-path: circle(var(--transition-radius, 150%) at var(--transition-x, 50%) var(--transition-y, 50%));
  }
}

.intro {
    background-color: var(--accent-color);
    padding-top: 7.5rem;
    padding-bottom: 12rem;
    position: relative;
    --tooth-height: 6rem;
}

/* Theme active states */

body.theme-capture .intro {
  background-color: var(--accent-color);/* =========================================
   GALLERY — inline section
   ========================================= */

#cursor { z-index: 99999 !important; }

/* ---- expanding section ---- */

.gallery-section {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s ease;
  width: 100%;
}

.gallery-section.is-open {
  grid-template-rows: 1fr;
}

.gallery-inner {
  overflow: hidden;
}

/* ---- masonry grid ---- */

.gallery-grid {
  column-count: 4;
  column-gap: 6px;
  padding: 2rem 6px 4rem;
}

.gallery-item {
  break-inside: avoid;
  margin-bottom: 6px;
  border-radius: 6px;
  overflow: hidden;
  cursor: none;
  display: block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.gallery-item.visible {
  opacity: 1;
  transform: translateY(0);
}

.gallery-item img {
  width: 100%;
  display: block;
  border-radius: 6px;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery-item:hover img {
  transform: scale(1.03);
  filter: brightness(1.1);
}

.gallery-loading {
  text-align: center;
  padding: 4rem;
  color: rgba(0,0,0,0.35);
  font-family: geom, sans-serif;
  font-size: 1rem;
  letter-spacing: 0.1em;
}

/* =========================================
   LIGHTBOX
   ========================================= */

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.92);
  z-index: 50000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.lightbox-img-wrap {
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-img-wrap img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: 4px;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-icon-btn {
  position: fixed;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  border-radius: 50%;
  cursor: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  padding: 0;
}

.lightbox-icon-btn:hover {
  background: rgba(255,255,255,0.2);
}

.lightbox-close-btn {
  top: 1.5rem;
  right: 1.5rem;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.4rem;
  line-height: 1;
}

.lightbox-nav-btn {
  top: 50%;
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  font-size: 1.8rem;
}

.lightbox-prev { left: 1.2rem; }
.lightbox-next { right: 1.2rem; }

.lightbox-counter {
  position: fixed;
  bottom: 1.4rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255,255,255,0.4);
  font-family: geom, sans-serif;
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  pointer-events: none;
}

/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {
  .gallery-grid {
    column-count: 2;
    column-gap: 4px;
    padding: 1rem 4px 3rem;
  }
  .gallery-item { cursor: default; }
  .lightbox-icon-btn { cursor: default; }
  .lightbox-prev { left: 0.4rem; }
  .lightbox-next { right: 0.4rem; }
}
}

body.theme-create .intro {
  background-color: var(--accent-color);
}

body.theme-code .intro {
  background-color: var(--accent-color);
}

/* Consolidated Theme Variables */
body.theme-capture {
    --page-background-color: #d9f1ff;
    --accent-color:#0672FE;
    --body-surface-color: var(--page-background-color);
    --sawtooth-fill-color: var(--page-background-color);
    --theme-shadow: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
    --heading-z-index: 3;
}

body.theme-create {
    --page-background-color: #ffd9e1;
    --accent-color: #f02247;
    --body-surface-color: var(--page-background-color);
    --sawtooth-fill-color: var(--page-background-color);
    --theme-shadow: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
    --heading-z-index: 3;
}

body.theme-code {
    --page-background-color: #9cc789;
    --accent-color: #001a0d;
    --body-surface-color: var(--page-background-color);
    --sawtooth-fill-color: var(--page-background-color);
    --theme-shadow: drop-shadow(0px 0px 20px rgb(26, 163, 145));
}

/* grayscale cards outside active themes */

.cards > div {
    transition: transform 0.1s ease-out, filter 0.3s ease;
}

/* hero */

.hero {
    width: 100%;
    height: 38rem;
    display: flex;
    gap: 4rem;
    background-color: var(--debug-background-color);
    position: relative;
    z-index: 1000;
    overflow: visible;
}

/* =========================================
   TOP SAWTOOTH FIX (Intro)
   ========================================= */
.intro-sawtooth-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(-1px);
    height: var(--tooth-height);
    z-index: 2;
    pointer-events: none;
    /* The wrapper holds the shadow so it isn't clipped */
    filter: var(--theme-shadow);
      clip-path: inset(-100% -100% 1px -100%);
}

.intro-sawtooth-shape {
    width: 100%;
    height: 100%;
    /* Use a custom sawtooth color if provided, otherwise fall back to the desaturated background */
    background: var(--sawtooth-fill-color, var(--page-background-color));
    /* The child cuts the shape */
    clip-path: polygon(
        0 30%,
        4.1667% 0%, 8.3333% 30%, 12.5% 0%, 16.6667% 30%, 20.8333% 0%,
        25% 30%, 29.1667% 0%, 33.3333% 30%, 37.5% 0%, 41.6667% 30%, 45.8333% 0%,
        50% 30%, 54.1667% 0%, 58.3333% 30%, 62.5% 0%, 66.6667% 30%, 70.8333% 0%,
        75% 30%, 79.1667% 0%, 83.3333% 30%, 87.5% 0%, 91.6667% 30%, 95.8333% 0%,
        100% 30%,
        100% 100%, 0% 100%
    );
}

/* hero face */

#heroFace {
    width: 100%;
    height: 100%;
    overflow: visible;
    position: relative;
    border-radius: 1rem;
    z-index: 1001;
    background: transparent;
}

#face {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    display: block;
    background: transparent;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    z-index: 1002;
}

#asciiFace {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background: transparent !important;
    font-family: "Courier New", Courier, monospace;
    letter-spacing: 0;
    transform: translate(-50%, -50%) translateX(var(--ascii-offset-x, 0)) scaleX(var(--ascii-scale-x, 1));
    transform-origin: center center;
    overflow: hidden;
    z-index: 1003;
}

/* text */

@font-face {
    font-family: geom;
    src: url(../fonts/Geom-VariableFont_wght.ttf);
}

h1 {
    color: white;
    text-align: center;
    font-size: 7vw;
    margin: 0;
    margin-top: 2rem;
    font-family: geom;
    position: relative;
    z-index: var(--heading-z-index);
    mix-blend-mode: difference;
    user-select: none;
}

h2 {
    font-size: 5rem;
    margin: 0;
}


/* cards */

.cards {
    margin-top: 4rem;
    background-color: var(--debug-background-color);
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.cards > div {
    background: var(--card-gradient);
    width: 20rem;
    max-width: 100%;
    height: 35rem;
    border-radius: 3rem;
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: transform 0.1s ease-out, filter 0.3s ease;
}

.card-content {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
}

#card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.glare {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle, white 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 3;
    transition: opacity 0.2s ease-out;
}

.card2 {
    margin-top: 2rem;
}

.card3 {
    margin-top: 4rem;
}


/* footer */

footer {
    display: flex;
    flex-direction: column;
    position: relative;
    margin-top: 2rem;
    height: fit-content;
    padding-bottom: 5rem;
    background: var(--accent-color);
    --footer-tooth-height: 6rem;
}

/* =========================================
   BOTTOM SAWTOOTH FIX (Footer)
   ========================================= */
.footer-sawtooth-wrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: var(--footer-tooth-height);
    z-index: 2;
    pointer-events: none;
    /* The wrapper holds the shadow */
    filter: var(--theme-shadow);
    clip-path: inset(1px -100% -100% -100%);
}

.footer-sawtooth-shape {
    width: 100%;
    height: 100%;
    background: var(--body-surface-color, var(--page-background-color));
    /* The child cuts the shape */
    clip-path: polygon(
        0 70%,
        4.1667% 100%, 8.3333% 70%, 12.5% 100%, 16.6667% 70%, 20.8333% 100%,
        25% 70%, 29.1667% 100%, 33.3333% 70%, 37.5% 100%, 41.6667% 70%, 45.8333% 100%,
        50% 70%, 54.1667% 100%, 58.3333% 70%, 62.5% 100%, 66.6667% 70%, 70.8333% 100%,
        75% 70%, 79.1667% 100%, 83.3333% 70%, 87.5% 100%, 91.6667% 70%, 95.8333% 100%,
        100% 70%,
        100% 0%, 0% 0%
    );
}





footer .footer-links {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.5rem;
    padding: 0;
    margin: 10rem 1.5rem 0;
    position: relative;
    z-index: 3;
    mix-blend-mode: difference;
}

footer .footer-links li {
    display: inline-flex;
}

footer .footer-links a {
    color: white;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    text-decoration: none;
    font-family: geom;
    transition: 0.25s;
    margin: 0;
}

footer h1 {
    margin-top: 2rem;
    font-size: 7vw;
}

footer a {
    align-self: center;
    color: white;
    mix-blend-mode: difference;
    font-size: 5vw;
    margin-top: 1rem;
    text-decoration: none;
    font-family: geom;
    transition: 0.25s;
}

footer a:hover {
    transform: scale(1.1);
}


/* =========================================
   MOBILE MEDIA QUERIES
   ========================================= */
@media (max-width: 768px) {
    body {
        margin: 0;
    }

    * {
        cursor: default;
    }

    .intro p {
        top: 1rem;
        font-size: 1rem;
    }

    #cursor {
        background: none;
    }

    .hero {
        flex-direction: column;
        height: auto;
        gap: 2rem;
    }

    #heroFace {
        flex: 0 0 auto;
        width: 100%;
        height: 30rem;
    }

    #heroInfo {
        flex: 0 0 auto;
        width: 100%;
        padding: 1.5rem;
        border-radius: 2rem;
    }

    #heroInfo h1 {
        font-size: 1.8rem;
    }

    .intro {
        padding-bottom: 6rem;
        padding-top: 0rem;
        --tooth-height: 2.5rem;
    }

    :root {
        --theme-shadow: drop-shadow(0px 0px 10px rgb(117, 194, 230));
    }
    body.theme-create, body.theme-capture {--theme-shadow: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.5));}
    body.theme-code {--theme-shadow: drop-shadow(0px 0px 7px rgb(26, 163, 145));}

    
    .intro-sawtooth-shape {
        clip-path: polygon(
            0 35%, 
            6.25% 0%, 12.5% 35%, 18.75% 0%, 25% 35%, 
            31.25% 0%, 37.5% 35%, 43.75% 0%, 50% 35%, 
            56.25% 0%, 62.5% 35%, 68.75% 0%, 75% 35%, 
            81.25% 0%, 87.5% 35%, 93.75% 0%, 100% 35%,
            100% 100%, 0% 100%
        );
    }

    h2 {
        font-size: 1rem;
    }

    .cards {
        margin-top: 1rem;
        gap: 5vw;
        padding: 0 1rem;
    }

    .cards > div {
        width: 27vw;
        height: 50vw;
        border-radius: 1rem;
    }

    .card2,
    .card3 {
        margin-top: 0;
    }

    footer {
        margin-top: 1rem;
        height: 20rem;
        --footer-tooth-height: 2.5rem;
    }

    .footer-sawtooth-shape {
        clip-path: polygon(
            0 65%,
            6.25% 100%, 12.5% 65%, 18.75% 100%, 25% 65%,
            31.25% 100%, 37.5% 65%, 43.75% 100%, 50% 65%,
            56.25% 100%, 62.5% 65%, 68.75% 100%, 75% 65%,
            81.25% 100%, 87.5% 65%, 93.75% 100%, 100% 65%,
            100% 0%, 0% 0%
        );
    }

    footer .footer-links {
        margin-top: 5rem;
    }

    footer h1 {
        font-size: 10vw;
    }

    footer a {
        font-size: 7vw;
    }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}