:root {
  --background: #f4f1e8;
  --accent: #9b4819;
  --text: #191919;

  --frame-dark: #6f3d21;
  --frame-mid: #a86234;
  --frame-light: #d29a66;

  --paper: #fffaf1;

  --serif: "Radley", Georgia, serif;
  --sans: "Carlito", Arial, sans-serif;

  --page-padding: clamp(24px, 4vw, 70px);
}


/* =========================
   RESET
========================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--background);
}

body {
  margin: 0;

  min-height: 100vh;

  background: var(--background);
  color: var(--text);

  font-family: var(--sans);

  overflow-x: hidden;
}

a {
  color: inherit;
}

button,
a {
  font: inherit;
}

button {
  color: inherit;
}


/* =========================
   HEADER
========================= */

.site-header {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  z-index: 100;

  display: flex;
  align-items: center;
  justify-content: space-between;

  padding:
    24px
    var(--page-padding);

  background:
    linear-gradient(
      to bottom,
      rgba(244, 241, 232, 0.96),
      rgba(244, 241, 232, 0)
    );
}

.logo {
  text-decoration: none;

  font-size: 0.82rem;
  font-weight: 700;

  letter-spacing: 0.09em;
}

.main-nav {
  display: flex;

  gap: clamp(
    16px,
    2.2vw,
    34px
  );
}

.main-nav a {
  position: relative;

  text-decoration: none;

  font-size: 0.88rem;
}

.main-nav a::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: -5px;

  width: 100%;
  height: 1px;

  background: var(--accent);

  transform: scaleX(0);
  transform-origin: right;

  transition:
    transform
    0.32s
    ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a.active::after {
  transform: scaleX(1);

  transform-origin: left;
}


/* =========================
   BACKGROUND SCENE
========================= */

.projects-scene {
  position: relative;

  min-height: 100svh;

  padding:
    105px
    var(--page-padding)
    40px;

  /*
    IMPORTANT:
    background_site2.png phải nằm
    cùng folder với projects.css
  */

  background-image:
    url("background_site2.png");

  background-repeat:
    no-repeat;

  background-size:
    cover;

  background-position:
    center center;

  overflow: hidden;
}


/* =========================
   HEADING
========================= */

.project-heading {
  position: relative;

  z-index: 10;

  width:
    min(760px, 86vw);

  margin:
    0 auto;

  text-align:
    center;
}

.eyebrow {
  margin:
    0 0 7px;

  color:
    var(--accent);

  font-size:
    0.72rem;

  font-weight:
    700;

  letter-spacing:
    0.14em;
}

.title-wrap {
  display:
    inline-block;
}

.project-heading h1 {
  margin:
    0;

  color:
    var(--accent);

  font-family:
    var(--serif);

  font-size:
    clamp(
      3.6rem,
      6.7vw,
      7rem
    );

  font-style:
    italic;

  font-weight:
    400;

  line-height:
    0.94;
}


/* underline drawing */

.title-line {
  display:
    block;

  width:
    min(510px, 72vw);

  height:
    42px;

  margin:
    -5px auto 0;
}

.title-line path {
  fill:
    none;

  stroke:
    var(--accent);

  stroke-width:
    2;

  stroke-linecap:
    round;

  stroke-dasharray:
    800;

  stroke-dashoffset:
    800;

  animation:
    drawLine
    1.15s
    cubic-bezier(.65, 0, .35, 1)
    forwards;
}

.title-line path:nth-child(2) {
  animation-delay:
    0.2s;
}

@keyframes drawLine {

  to {
    stroke-dashoffset:
      0;
  }

}

.intro-text {
  max-width:
    670px;

  margin:
    0 auto;

  color:
    rgba(
      25,
      25,
      25,
      0.75
    );

  font-size:
    1rem;

  line-height:
    1.5;
}


/* =========================
   FRAME WALL
========================= */

.frame-wall {
  position:
    relative;

  z-index:
    20;

  width:
    min(
      1300px,
      88vw
    );

  height:
    clamp(
      390px,
      48vh,
      530px
    );

  margin:
    16px
    auto
    0;
}


/* =========================
   PROJECT FRAME
========================= */

.project-frame {
  position:
    absolute;

  width:
    clamp(
      175px,
      15.2vw,
      245px
    );

  padding:
    0;

  border:
    0;

  background:
    transparent;

  text-decoration:
    none;

  cursor:
    pointer;

  transform-origin:
    50%
    -50px;

  transition:
    transform
    0.45s
    cubic-bezier(.2, .8, .2, 1),
    filter
    0.4s
    ease;
}

.project-frame:hover,
.project-frame:focus-visible {
  z-index:
    30;

  transform:
    translateY(-9px)
    rotate(0deg)
    scale(1.045);

  filter:
    drop-shadow(
      0
      18px
      16px
      rgba(
        83,
        52,
        28,
        0.18
      )
    );
}


/* =========================
   FRAME POSITIONS
========================= */

.frame-professional {
  left:
    2%;

  top:
    52px;

  transform:
    rotate(-1.5deg);
}

.frame-thesis {
  left:
    22%;

  top:
    22px;

  transform:
    rotate(1deg);
}

.frame-personal {
  left:
    42%;

  top:
    66px;

  transform:
    rotate(-0.8deg);
}

.frame-design {
  left:
    62%;

  top:
    27px;

  transform:
    rotate(1.4deg);
}

.frame-photo {
  right:
    0;

  top:
    58px;

  transform:
    rotate(-0.6deg);
}


/* =========================
   HANGING STRING
========================= */

.hanger {
  position:
    absolute;

  width:
    100%;

  height:
    72px;

  left:
    0;

  top:
    -65px;

  pointer-events:
    none;
}

.nail {
  position:
    absolute;

  left:
    50%;

  top:
    0;

  width:
    9px;

  height:
    9px;

  border-radius:
    50%;

  background:
    #6d4a2f;

  box-shadow:
    0 2px 4px
    rgba(
      0,
      0,
      0,
      0.18
    );

  transform:
    translateX(-50%);
}

.wire {
  position:
    absolute;

  top:
    5px;

  width:
    50%;

  height:
    1px;

  background:
    #6f4b31;

  transform-origin:
    top;
}

.wire-left {
  left:
    50%;

  transform:
    rotate(37deg);
}

.wire-right {
  right:
    50%;

  transform:
    rotate(-37deg);
}


/* =========================
   WOOD FRAME
========================= */

.wood-frame {
  display:
    block;

  padding:
    8px;

  background:
    linear-gradient(
      135deg,
      var(--frame-light),
      var(--frame-mid) 25%,
      var(--frame-dark) 55%,
      var(--frame-light)
    );

  border:
    1px solid
    #63351d;

  box-shadow:
    inset
    0
    0
    0
    2px
    rgba(
      255,
      255,
      255,
      0.18
    ),

    inset
    0
    0
    0
    4px
    rgba(
      71,
      36,
      19,
      0.15
    ),

    0
    7px
    16px
    rgba(
      73,
      46,
      27,
      0.15
    );
}

.mat {
  display:
    block;

  padding:
    9px;

  background:
    #e8d5bb;
}

.frame-content {
  position:
    relative;

  min-height:
    270px;

  display:
    flex;

  flex-direction:
    column;

  justify-content:
    center;

  align-items:
    center;

  padding:
    23px
    18px;

  background:
    radial-gradient(
      circle
      at
      50%
      0,
      rgba(
        255,
        255,
        255,
        0.72
      ),
      transparent
      45%
    ),
    var(--paper);

  text-align:
    center;

  border:
    1px
    solid
    rgba(
      92,
      58,
      35,
      0.15
    );
}


/* =========================
   FRAME CONTENT
========================= */

.frame-number {
  position:
    absolute;

  top:
    14px;

  left:
    16px;

  color:
    var(--accent);

  font-family:
    var(--serif);

  font-style:
    italic;

  font-size:
    0.95rem;
}

.frame-title {
  color:
    var(--accent);

  font-family:
    var(--serif);

  font-size:
    clamp(
      1.22rem,
      1.55vw,
      1.75rem
    );

  font-style:
    italic;

  line-height:
    1.05;
}

.mini-divider {
  width:
    42px;

  height:
    1px;

  margin:
    15px
    auto
    17px;

  background:
    var(--accent);
}

.frame-description {
  max-width:
    20ch;

  color:
    rgba(
      25,
      25,
      25,
      0.74
    );

  font-size:
    0.82rem;

  line-height:
    1.45;
}


/* =========================
   PHOTO PLACEHOLDER
========================= */

.muted-frame {
  opacity:
    0.8;

  filter:
    saturate(0.5);
}

.photo-disabled {
  cursor:
    default;
}

.camera-icon {
  position:
    relative;

  width:
    58px;

  height:
    42px;

  margin:
    0 0 16px;
}

.camera-body {
  position:
    absolute;

  inset:
    6px 0 0;

  border:
    2px
    solid
    rgba(
      25,
      25,
      25,
      0.58
    );

  border-radius:
    5px;
}

.camera-body::before {
  content:
    "";

  position:
    absolute;

  width:
    22px;

  height:
    8px;

  left:
    17px;

  top:
    -9px;

  border:
    2px
    solid
    rgba(
      25,
      25,
      25,
      0.58
    );

  border-bottom:
    0;

  border-radius:
    4px
    4px
    0
    0;
}

.camera-lens {
  position:
    absolute;

  width:
    24px;

  height:
    24px;

  left:
    17px;

  top:
    15px;

  border:
    2px
    solid
    rgba(
      25,
      25,
      25,
      0.58
    );

  border-radius:
    50%;
}


/* =========================
   SUBTLE SWING
========================= */

.ready .frame-professional {
  animation:
    swingOne
    6.2s
    ease-in-out
    infinite;
}

.ready .frame-thesis {
  animation:
    swingTwo
    7s
    ease-in-out
    infinite;
}

.ready .frame-personal {
  animation:
    swingOne
    6.8s
    0.6s
    ease-in-out
    infinite;
}

.ready .frame-design {
  animation:
    swingTwo
    7.4s
    0.3s
    ease-in-out
    infinite;
}

@keyframes swingOne {

  0%,
  100% {
    rotate:
      -0.45deg;
  }

  50% {
    rotate:
      0.45deg;
  }

}

@keyframes swingTwo {

  0%,
  100% {
    rotate:
      0.4deg;
  }

  50% {
    rotate:
      -0.4deg;
  }

}

.project-frame:hover {
  animation-play-state:
    paused;
}


/* =========================
   EXPLORE TEXT
========================= */

.explore-copy {
  position:
    absolute;

  z-index:
    15;

  left:
    50%;

  bottom:
    17%;

  color:
    var(--accent);

  font-size:
    clamp(
      0.9rem,
      1.4vw,
      1.15rem
    );

  transform:
    translateX(-1%);
}


/* =========================
   HOVER MESSAGE
========================= */

.hover-note {
  position:
    fixed;

  z-index:
    200;

  left:
    50%;

  bottom:
    24px;

  padding:
    9px
    15px;

  border-radius:
    999px;

  background:
    rgba(
      25,
      25,
      25,
      0.92
    );

  color:
    var(--background);

  opacity:
    0;

  transform:
    translate(
      -50%,
      14px
    );

  pointer-events:
    none;

  transition:
    opacity
    0.25s
    ease,
    transform
    0.25s
    ease;
}

.hover-note.visible {
  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );
}


/* =========================
   PHOTO TOAST
========================= */

.photo-toast {
  position:
    fixed;

  z-index:
    300;

  left:
    50%;

  bottom:
    28px;

  padding:
    10px
    17px;

  border-radius:
    999px;

  background:
    var(--text);

  color:
    var(--background);

  opacity:
    0;

  transform:
    translate(
      -50%,
      15px
    );

  pointer-events:
    none;

  transition:
    opacity
    0.3s
    ease,
    transform
    0.3s
    ease;
}

.photo-toast.show {
  opacity:
    1;

  transform:
    translate(
      -50%,
      0
    );
}


/* =========================
   PAGE TRANSITION
========================= */

.page-transition {
  position:
    fixed;

  inset:
    0;

  z-index:
    9999;

  background:
    var(--accent);

  transform:
    translateY(100%);

  pointer-events:
    none;
}

.page-transition.entering {
  animation:
    pageCover
    0.7s
    cubic-bezier(
      .76,
      0,
      .24,
      1
    )
    forwards;
}

@keyframes pageCover {

  to {
    transform:
      translateY(0);
  }

}


/* =========================
   RESPONSIVE TABLET
========================= */

@media (max-width: 1100px) {

  .frame-wall {
    width:
      min(
        940px,
        92vw
      );

    height:
      580px;
  }

  .project-frame {
    width:
      clamp(
        165px,
        20vw,
        220px
      );
  }

  .frame-content {
    min-height:
      245px;
  }

}


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

@media (max-width: 860px) {

  body {
    overflow-y:
      auto;
  }

  .main-nav a:not(.active) {
    display:
      none;
  }

  .projects-scene {
    min-height:
      100vh;

    overflow:
      visible;

    background-size:
      auto
      100vh;

    background-position:
      center
      top;

    padding-bottom:
      100px;
  }

  .frame-wall {
    width:
      min(
        560px,
        92vw
      );

    height:
      auto;

    display:
      grid;

    gap:
      72px;

    margin-top:
      70px;
  }

  .project-frame,
  .frame-professional,
  .frame-thesis,
  .frame-personal,
  .frame-design,
  .frame-photo {
    position:
      relative;

    top:
      auto;

    left:
      auto;

    right:
      auto;

    width:
      min(
        320px,
        78vw
      );

    margin:
      0 auto;

    transform:
      rotate(-0.7deg);
  }

  .project-frame:nth-child(even) {
    transform:
      rotate(0.7deg);
  }

  .project-frame:hover,
  .project-frame:focus-visible {
    transform:
      translateY(-7px)
      rotate(0)
      scale(1.025);
  }

  .hanger {
    top:
      -58px;
  }

  .frame-content {
    min-height:
      290px;
  }

  .explore-copy {
    display:
      none;
  }

}


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

@media (max-width: 560px) {

  .site-header {
    padding-top:
      19px;
  }

  .project-heading h1 {
    font-size:
      clamp(
        3rem,
        16vw,
        4.8rem
      );
  }

  .intro-text {
    font-size:
      0.94rem;
  }

}


/* =========================
   ACCESSIBILITY
========================= */

a:focus-visible,
button:focus-visible {
  outline:
    2px
    solid
    var(--accent);

  outline-offset:
    5px;
}

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration:
      0.01ms
      !important;

    animation-iteration-count:
      1
      !important;

    transition-duration:
      0.01ms
      !important;
  }

  .title-line path {
    stroke-dashoffset:
      0;
  }

}