@font-face {
    font-family: 'Alfena Pixel';
    src: url('../assets/fonts/AlfenaPixel-Regular.woff2') format('woff2'),
         url('../assets/fonts/AlfenaPixel-Regular.woff') format('woff');
}


@keyframes animateGrain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, -20%); }
    30% { transform: translate(-5%, -10%); }
    40% { transform: translate(-15%, -20%); }
    50% { transform: translate(-5%, -10%); }
    60% { transform: translate(-15%, -20%); }
    70% { transform: translate(-5%, -10%); }
    80% { transform: translate(-15%, -20%); }
    90% { transform: translate(-5%, -10%); }
    100% { transform: translate(-15%, -20%); }
}

/* Home page main */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background:
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 2px,        /* ← gap between lines */
      rgba(2, 14, 22, 0.3) 2px, /* ← line start (change 0.12 for darker/lighter) */
      rgba(0, 0, 0, 0.2) 4px  /* ← line end (distance from gap = line thickness) */
    ),
    #0c0c0c;
  color: white;
  font-family: 'Alfena Pixel', monospace;
  overflow-x: hidden;
}
.hero {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.name {
  font-size: 4rem;
  color: #ffeb52;
  padding: 1.5rem 2rem;
  font-weight: normal;
}

.divider {
  width: 100%;
  height: 2px;
  background: white;
}

.video-container {
  width: 100%;
  flex: 1;
  overflow: hidden;
  max-height: 55vh;
}

video {
    display: block;
    object-fit: contain;
}

.video-container video {
    width: 100%;
    height: 100%;
}

.subtitle {
  font-size: 2rem;
  padding: 1.5rem 2rem;
}
/* about */
.about {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4rem 6rem;
    gap: 4rem;
}
.about-title {
    font-size: 4rem;
    color: #ffeb52;
    font-weight: normal;
    margin-bottom: 2rem;
}

.about-video {
    flex: 0 0 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-video video {
    width: 90%;
    height: auto;
    object-fit: contain;
}

.about-text {
   flex: 1;
    padding-left: 1rem;
    padding-top: 0;
    align-self: flex-start;
    margin-top: 4rem;
}

.about-text p {
    font-size: 1.7rem;
    line-height: 1.5;
    text-align: left;
}
/* works */
/* .works {
    width: 100%;
    min-height: 100vh;
    padding: 4rem 2rem;

}

.works-title {
    font-size: 6rem;
    color: #ffeb52;
    font-weight: normal;
    padding: 1.5rem 2rem;
}

.works-item {
    width: 100%;
    cursor: pointer;
}

.works-header {
    width: 100%;
}

.works-header h3 {
    font-size: 3rem;
    font-weight: normal;
    padding: 1.2rem 2rem;
    text-align: center;
}

.works-content {
    display: none;
    padding: 2rem;
}

.works-content.open {
    display: block;
}

.works-subtitle {
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
} */

/* works */
/* works */
.works-section {
    min-height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0c0c0c;
    position: relative;
    overflow: hidden;
}

.works-one {
    z-index: 1;
    min-height: auto;
}
.works-two { z-index: 2; }
.works-three { z-index: 3; }
.works-four { z-index: 4; }

.panel-inner {
    width: 100%;
    height: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem;
}

.works-title {
    font-size: 6rem;
    color: #ffeb52;
    font-weight: normal;
}

.panel-title {
    font-size: 3rem;
    font-weight: normal;
    color: #FFEB52;
    margin-bottom: 1rem;
    text-align: center;
}

.works-subtitle {
    font-size: 1srem;
    text-align: center;
    /* margin-bottom: 2rem; */
    opacity: 0.7;
}
.works-one .panel-inner {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 8rem;
    position: relative;
}

/* works-two: two-column layout */
.works-two {
    min-height: 100vh;
}

.works-two .panel-inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    min-height: 100vh;
    height: 100vh;
}

/* LEFT column: title, info, controls */
.works-two-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 3rem 3rem 4rem;
    box-sizing: border-box;
}

.works-two-header .panel-title {
    text-align: left;
    margin-bottom: 0.3rem;
}

.works-two-header .works-subtitle {
    text-align: left;
}

.works-two-info {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.works-two-info h4 {
    font-size: 2rem;
    font-weight: normal;
    color: #fefefe;
}

.works-two-info p {
    font-size: 1rem;
    line-height: 1.6;
}

.works-two-controls {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    padding: 0;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

/* RIGHT column: full-height video */
.works-two-right {
    flex: 1;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 2rem 2rem 2rem 0;
}

.works-two-right .motion-gallery {
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-two-right .motion-slide {
    display: none;
}

.works-two-right .motion-slide.active {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.works-two-right .motion-slide video {
    width: auto;
    height: 100%;
    max-height: 100vh;
    max-width: 100%;
    object-fit: contain;
    cursor: pointer;
    display: block;
    background: #0c0c0c;
}

.mystuff-cat-left,
.mystuff-cat-right {
    display: flex;
    align-items: center;
}

.mystuff-cat-left video,
.mystuff-cat-right video {
    width: 250px;
    height: auto;
}

.mystuff-cat-right video {
    transform: scaleX(-1);
}

.works-one {
    margin-bottom: 12rem;
}

.marquee-wrap {
    width: 100%;
    overflow: hidden;
}

.marquee-wrap .divider {
    background: white;
    height: 2px;
}

.marquee-track {
    padding: 0.2rem 0;
    overflow: hidden;
    white-space: nowrap;
}

.marquee-text {
    display: inline-block;
    font-size: 4.5rem;
    color: #ffeb52;
    font-weight: normal;
    white-space: nowrap;
    will-change: transform;
}

/* contact */
.contact {
    width: 100%;
    max-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem 0;
}

.contact-title {
    position: absolute;
    top: 2rem;
    left: 2rem;
    font-size: 6rem;
    color: #ffeb52;
    font-weight: normal;
}

.contact-hand-left {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
}

.contact-hand-right {
     flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0;
    overflow: hidden;
}

.contact-hand-left video,
.contact-hand-right video {
      width: 100%;
    height: auto;
    max-width: 320px;
}

.contact-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    text-align: center;
}

.contact-email {
    font-size: 2.7rem;
}

.contact-phone {
    font-size: 3.5rem;
}

.contact-socials {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.5rem;
}

.contact-socials a {
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.contact-socials a:hover {
    opacity: 0.5;
}

.contact-divider {
    width: 1px;
    height: 20px;
    background: white;
}
/* carousel */
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 2rem 0;
}

.carousel-track {
    position: relative;
    width: 300px;
    height: 600px;
}

.carousel-slide {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.carousel-slide.active {
    display: flex;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.carousel-caption {
    font-size: 1rem;
    font-style: italic;
    text-align: center;
}

.carousel-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.carousel-btn:hover {
    opacity: 1;
}

.carousel-btn svg {
    width: 48px;
    height: 48px;
}
.carousel-btn.prev svg {
    transform: rotate(-90deg);
}

.carousel-btn.next svg {
    transform: rotate(90deg);
}
/* motion gallery */
.motion-gallery {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem 0;
}

.motion-slide {
    display: none;
    justify-content: center;
    align-items: center;
}

.motion-slide.active {
    display: flex;
}

.motion-slide video {
    max-width: 80%;
    max-height: 70vh;
    width: auto;
    height: auto;
}

.motion-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1rem 0 2rem;
}

.motion-controls button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 1rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.motion-controls button:hover {
    opacity: 1;
}

.motion-prev svg {
    transform: rotate(-90deg);
}

.motion-next svg {
    transform: rotate(90deg);
}

.motion-play {
    color: white;
    font-size: 1.5rem;
}

/* works-three: school projects */
.works-three {
    min-height: 100vh;
}

.works-three .panel-inner {
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    gap: 0;
    min-height: 100vh;
    height: 100vh;
}

.works-three-left {
    flex: 0 0 42%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2rem;
    padding: 3rem 3rem 3rem 4rem;
    box-sizing: border-box;
}

.works-three-header .panel-title {
    text-align: left;
    margin-bottom: 0.3rem;
}

.works-three-header .works-subtitle {
    text-align: left;
}

.works-three-info p {
    font-size: 1rem;
    line-height: 1.6;
}

.works-three-controls {
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
}

.works-three-controls button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.works-three-controls button:hover {
    opacity: 1;
}

.project-prev svg {
    transform: rotate(-90deg);
}

.project-next svg {
    transform: rotate(90deg);
}

.works-three-right {
    flex: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    overflow: hidden;
    padding: 2rem 2rem 2rem 0;
}

/* project video controls — under the media */
.project-video-controls {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.5rem 0 1rem;
    flex-shrink: 0;
}

.project-play {
    background: none;
    border: none;
    cursor: pointer;
    color: white;
    font-size: 1.5rem;
    padding: 0;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    text-align: left;
}

.project-play:hover { opacity: 1; }

.project-progress-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.project-progress-track {
    width: 100%;
    height: 20px;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.project-progress-track::before {
    content: '';
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
}

.project-progress-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0%;
    height: 2px;
    background: white;
    pointer-events: none;
}

.project-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    pointer-events: none;
}

.project-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    opacity: 0.5;
}

.project-gallery {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-slide {
    display: none;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
}

.project-slide.active {
    display: flex;
}

.project-slide img,
.project-slide video {
    width: auto;
    height: 100%;
    max-height: 100vh;
    max-width: 100%;
    object-fit: contain;
    display: block;
    background: #0c0c0c;
}

/* video progress bar */
.motion-progress-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.motion-progress-track {
    width: 100%;
    height: 20px; /* tall hit area */
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: center;
}

/* the visible line */
.motion-progress-track::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 2px;
    background: rgba(255, 255, 255, 0.25);
}

.motion-progress-fill {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 0%;
    height: 2px;
    background: white;
    pointer-events: none;
}

.motion-progress-handle {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: white;
    pointer-events: none;
}

.motion-time {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    opacity: 0.5;
}

/* photography section */
.works-four .panel-inner {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: 3rem 3rem 3rem 4rem;
    gap: 1.5rem;
}

.works-four-header .panel-title {
    text-align: left;
    margin-bottom: 0.3rem;
}

.works-four-header .works-subtitle {
    text-align: left;
}

.photo-viewer {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.photo-prev,
.photo-next {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    opacity: 0.6;
    transition: opacity 0.3s ease;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.photo-prev:hover,
.photo-next:hover { opacity: 1; }
.photo-prev svg { transform: rotate(-90deg); }
.photo-next svg { transform: rotate(90deg); }

.photo-display {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-width: 0;
}

/* portrait: 3 equal columns */
.photo-display.portrait img {
    flex: 1;
    min-width: 0;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* landscape: single image, capped height */
.photo-display.landscape img {
    max-width: 100%;
    height: auto;
    max-height: 70vh;
    object-fit: contain;
    display: block;
}

.photo-location {
    font-size: 0.9rem;
    opacity: 0.5;
    letter-spacing: 0.05em;
}