/* ══════════════════════════════════════
   about.html — Page Styles
   ══════════════════════════════════════ */
html{
  scrollbar-gutter: stable;
}

.main{
  width: 100%;max-width: 100%;
  margin: 30px 0px 50px 0px;
  padding: var(--space-lg) 0;
  height: fit-content;
  display: flex;justify-content: center;align-items: center;
}
@media (max-width: 768px) {
  .main{
    margin: 0px 0px 50px 0px;
  }
}

/* ! INTRO */
.intro{
  width: 100%;
  height: fit-content;
  padding: 30px;
  display: flex;justify-content: center;align-items: flex-start;
}

.intro .text{  
  flex-shrink: none;
  position: relative;z-index: 2;
  width: 550px;height: 100%;
  display: flex;justify-content: center;align-items: center;flex-direction: column;
}
.intro .text p{font-weight: normal; margin: 0;padding: 0;font-size: 0.875rem; line-height: 1.5;}
.intro .intro__greeting, .info__greeting{
  width: 100%;
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gray);
  margin-right: auto;
  margin-bottom: var(--space-lg);
}

.intro img{
  object-fit: contain;
  height: 450px;
  margin-left: 10%;
  user-select: none;
}
@media (max-width: 1130px) {
  .intro .text{width: 330px;}
  .intro img{height: 400px;}
}
@media (max-width: 850px) {
  .intro{  padding: var(--space-xl) 10px calc(var(--space-xl) + 30px) 10px;}
  .intro .text{width: 250px;}
  .intro img{height: 300px;margin-left: 10%;}
}
@media (max-width: 700px) {
  .intro .text{width: 100%;}
  .intro img{margin: 0px auto 30px auto; width: 100%;height: auto;}
  .intro{flex-direction: column-reverse;padding: 0 60px var(--space-xl) 60px;margin-top: 0px;}
}

.intro button{
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--blue);
  background-color: transparent;
  border: none;
  transition: color var(--duration) var(--ease);
}
.intro button:hover{
  cursor: pointer;
  text-decoration: underline;
}

/* Carousel */
.carousel {
  width: 100%;
  padding: var(--space-md);
}

.carousel .flickity-viewport {
  overflow: hidden;
}

.carousel-cell {
  border-radius: 0;
  width: 95%;
  height: 320px;
  background: var(--off-white);
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--gray);
  user-select: none;
  margin-left: 2.5%;
  margin-right: 2.5%;
}

.carousel .flickity-page-dots {
  bottom: -30px;
  left: 0;bottom: -10px;
  text-align: center;
}

.carousel .flickity-page-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--light-gray);
  opacity: 1;
  margin: 0 5px;
}

.carousel .flickity-page-dots .dot.is-selected {
  background: var(--black);
}

/* Carousel S2 */
.carousel-s2 {
  width: 100%;
  padding: var(--space-md) 0;
}

.carousel-s2 .flickity-viewport {
  overflow: hidden;
}

.carousel-cell-s2 {
  width: 300px;
  margin-right: 16px;
  padding: 16px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

.cell-s2__title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--black);
  margin-bottom: 12px;
}

.cell-s2__frame {
  width: 100%;
  height: 200px;
  border: 2px dashed var(--light-gray);
  border-radius: 12px;
  display: grid;place-items: center;
}
.cell-s2__frame img{
  object-fit: contain;
  height: 170px;
  border-radius: 20px;
}

.carousel-s2 .flickity-page-dots {
  left: 0;
  bottom: -10px;
  text-align: center;
}

.carousel-s2 .flickity-page-dots .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--light-gray);
  opacity: 1;
  margin: 0 5px;
}

.carousel-s2 .flickity-page-dots .dot.is-selected {
  background: var(--black);
}


/* ! Modal PopUp */
.modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow-y: auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  pointer-events: none;
  scrollbar-width: none;
  transition: background-color 0.4s var(--ease),
              backdrop-filter 0.4s var(--ease),
              -webkit-backdrop-filter 0.4s var(--ease);
}

.modal-overlay::-webkit-scrollbar {
  display: none;
}

.modal-overlay.active {
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  pointer-events: all;
}

.modal {
  display: none;
  position: relative;
  background: var(--white);
  padding: var(--space-xl);
  padding-top: calc(var(--space-xl) + 8px);
  width: 100%;
  max-width: 900px;
  flex-shrink: 0;
  transform: translateY(60px);
  opacity: 0;
  transition: transform 0.45s cubic-bezier(0.32, 0.72, 0, 1),
              opacity 0.3s var(--ease);
}

.modal.visible {
  transform: translateY(0);
  opacity: 1;
}

.modal__close {
  position: sticky;
  bottom: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--space-lg) auto 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(60, 60, 67, 0.6);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  border: none;
  color: var(--white);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease);
  z-index: 1;
}

.modal__close:hover {
  background: rgba(60, 60, 67, 0.7);
}

.modal__close svg {
  display: block;
}

.modal__body {
  margin-bottom: var(--space-lg);
}

.modal__body h3{
  color: var(--dark-gray);
  font-size: 2rem;
  line-height: 0.9;
  margin-bottom: 5px;
  text-align: center;
}

.modal__body p {
  text-align: center;
  font-size: 0.95rem;
  line-height: 1.2;
  color: var(--dark-gray);
  margin-bottom: var(--space-md);
}

.modal__body .slide{
  height: fit-content;width: 100%;
  padding: var(--space-md) 0;
  display: flex;flex-direction: column;
}

.modal__body .slide p{
  width: 90%;
}

@media (max-width: 768px) {
  .modal {
    padding: var(--space-md);
    max-width: 95%;
  }

  .modal__body .slide p{
    width: 87%;margin: 3px auto 15px auto;
  }
}

/* ! Polaroid Stack */
.polaroid-stack {
  position: relative;
  width: 340px;
  height: 280px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .polaroid-stack {
    position: relative;
    width: 300px;
    height: 280px;
    margin: 0 auto;
}
}

.polaroid {
  position: absolute;
  top: 0;
  width: 220px;
  padding: 10px 10px 20px 10px;
  background: #fff;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.12),
    0 2px 2px rgba(0, 0, 0, 0.12),
    0 4px 4px rgba(0, 0, 0, 0.12),
    0 8px 8px rgba(0, 0, 0, 0.12);
  transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
}
@media (max-width: 768px) {
  .polaroid{
    width: 180px;
    height: fit-content;
  }
}

.polaroid[data-polaroid="0"] { left: 0; transform: rotate(-4deg); z-index: 1; }
.polaroid[data-polaroid="1"] { left: 50%; transform: translateX(-50%) rotate(0deg); z-index: 3; }
.polaroid[data-polaroid="2"] { right: 0; transform: rotate(4deg); z-index: 1; }

.polaroid-stack:hover .polaroid { opacity: 1; }
.polaroid-stack .polaroid:hover {
  opacity: 1;
  z-index: 10;
  transform: rotate(0deg) scale(1.05) translateY(-8px);
  box-shadow:
    0 4px 4px rgba(0, 0, 0, 0.15),
    0 8px 8px rgba(0, 0, 0, 0.15),
    0 16px 16px rgba(0, 0, 0, 0.12);
}
.polaroid[data-polaroid="1"]:hover {
  transform: translateX(-50%) scale(1.05) translateY(-8px);
}

.photo {
  user-select: none;
  border: 1px solid gray;
  width: 100%;
  height: 200px;
  position: relative;
  overflow: hidden;
}
.photo img{
  object-fit: cover;
  width: 100%;height: 100%;
}

.caption {
  font-family: "Playfair Display", serif;
  text-align: center;
  margin-top: 12px;
  color: #333;
  font-size: 14px;
  opacity: 0.8;
}

@keyframes shine {
  0% {
    transform: translateX(-100%) rotate(120deg);
  }
  20%,
  100% {
    transform: translateX(100%) rotate(120deg);
  }
}