html {

  scroll-behavior: smooth;

}

@font-face {

  font-family: "Morgenta";

  src: url("../assets/fonts/Morgenta.ttf");

}

* {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}

html,
body {

  width: 100%;
  min-height: 100%;

  overflow-x: hidden;
  overflow-y: auto;

  background-color: var(--bg) !important;
  color: var(--text) !important;

  font-family: "Morgenta";

  transition:
    background-color 0.35s ease,
    color 0.35s ease;

  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.25) transparent;

}

body {

  width: 100%;

}

html.photo-drag-lock,
body.photo-drag-lock {

  overflow: hidden;

  overscroll-behavior: none;

}

.hero {

  position: fixed;

  top: 0;
  left: 0;

  width: 100%;

  padding-top: 1.5rem;

  text-align: center;

  box-sizing: border-box;

  z-index: 1000;

  background: var(--bg);

}



.hero-title {

  --reveal-size: 43px;

  position: relative;

  z-index: 5;

  left: 50%;

  transform:
    translateX(-50%);

  display: flex;

  width: fit-content;

  gap: 14px;

  font-size: 120px;

  font-weight: 900;

  line-height: 1;

  text-transform: uppercase;

  letter-spacing: -0.04em;

  user-select: none;

  transition:
    transform 1s cubic-bezier(0.22, 1, 0.36, 1);

}

@media (max-width: 768px) {

  .hero-title {

    font-size: 74px;

    --reveal-size: 27px;

  }

}

.hero-scrolled {

  justify-content: flex-start;

}

.hero-title.hero-scrolled {

    transform:
      translateX(calc(-50vw + 25px));

}

.ll-home {

  display: flex;

  align-items: center;

  gap: 0;

  cursor: pointer;

}

/* ========================= */
/* SCROLLBAR */
/* ========================= */

::-webkit-scrollbar {

  width: 8px;

}

::-webkit-scrollbar-track {

  background: transparent;

}

::-webkit-scrollbar-thumb {

  background:
    rgba(255,255,255,0.18);

  border-radius: 999px;

  transition: background 0.3s ease;

}

::-webkit-scrollbar-thumb:hover {

  background:
    rgba(255,255,255,0.38);

}

section {

  width: 100%;

  height: auto;

  min-height: fit-content;

}

/* ========================= */
/* INTRO */
/* ========================= */

.intro-section {

  width: 100%;

  display: flex;

  gap: clamp(2rem, 4vw, 6rem);

  padding:
    16em
    clamp(3em, 7vw, 8em)
    4em;

  height: auto;

  min-height: 0;

  box-sizing: border-box;

  align-items: center;

  justify-content: center;

  background: var(--bg);

}
/* ========================= */
/* LEFT */
/* ========================= */
.intro-left {

  flex: 1;

  position: relative;

  display: flex;

  justify-content: flex-end;


}

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

.intro-content {


  width: 100%;

  max-width: 32em;

  

}

/* ========================= */
/* LABEL */
/* ========================= */

.intro-label {

  display: block;

  margin-bottom: 1rem;

  color: var(--text);

  font-size: 1rem;

  letter-spacing: 0.35em;

}

/* ========================= */
/* TITLE */
/* ========================= */

.intro-title {

  margin: 0 0 2rem;

  color: var(--secondary);

  font-size:
    clamp(2.4rem, 4vw, 4.8rem);

  line-height: 0.9;

  font-weight: 700;

  text-transform: uppercase;

}

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

.intro-text {

  margin: 0 auto;

  color: var(--muted);

  font-size:
    clamp(1rem, 1.1vw, 1.15rem);

  line-height: 1.75;

  font-weight: 300;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  max-width: 22rem;

  width: 100%;

  text-align: center;

  word-break: normal;

  overflow-wrap: anywhere;

  hyphens: none;

}

.intro-text::before {

  content: "";

  display: inline-block;

  width: 0.62em;
  height: 0.62em;

  margin-right: 0.55em;
  margin-bottom: 0.08em;

  border-radius: 50%;

  background:
    #ff0000;

  box-shadow:
    0 0 12px rgba(255, 0, 0, 0.34);

  vertical-align: middle;

}

/* ========================= */
/* RIGHT */
/* ========================= */

.intro-right {

  flex: 1;

  display: flex;

  justify-content: flex-start;

  align-items: stretch;

  min-width: 0;

}

/* ========================= */
/* IMAGE */
/* ========================= */

.intro-image {

  width: 100%;

  max-width: 48em;

  height: 100%;

  min-height: 32em;

  position: relative;

  overflow: visible;

  display: flex;

  align-items: center;

  justify-content: center;

}

.map-stage {

  position: relative;

  width: 100%;

  aspect-ratio:
    1280 / 878;

  z-index: 20;

  overflow:
    visible;

}

.intro-image img {

  width: 100%;

  height: 100%;

  object-fit: contain;

  object-position: top;

  display: block;

  position: absolute;

  inset: 0;

  filter:
    none;

}

.intro-image .map-image-light {

  display: none;

}

body.light-theme .intro-image .map-image-dark {

  display: none;

}

body.light-theme .intro-image .map-image-light {

  display: block;

}

.map-location-dot {

  position: absolute;

  top: 30.98%;
  left: 44.3%;

  width:
    1.72%;

  height:
    auto;

  aspect-ratio:
    1 / 1;

  border-radius:
    50%;

  background:
    #ff1515;

  box-shadow:
    0 0 0 0 rgba(255,21,21,0.44),
    0 0 16px rgba(255,21,21,0.46);

  transform:
    translate(-50%, -50%)
    scale(1);

  transform-origin:
    center;

  pointer-events:
    auto;

  z-index:
    120;

  cursor:
    pointer;

  animation:
    mapDotPulse 1.45s ease-in-out infinite;

}

.map-location-dot::before {

  content: "";

  position: absolute;

  inset:
    -1.05rem;

  border-radius:
    50%;

  background:
    transparent;

}

.map-memory-wheel {

  position: absolute;

  top: 30.98%;
  left: 44.3%;

  width: 24%;

  aspect-ratio:
    1 / 2;

  transform:
    translate(0, -50%)
    scale(0.24)
    rotate(-10deg);

  transform-origin:
    left center;

  display:
    block;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index:
    110;

  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.62s cubic-bezier(.16,.96,.2,1);

}

.map-stage.memory-open .map-memory-wheel {

  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  transform:
    translate(0, -50%)
    scale(1)
    rotate(0deg);

}

.map-memory-svg {

  width:
    100%;

  height:
    100%;

  display:
    block;

  overflow:
    visible;

  filter:
    drop-shadow(0 0 1.4rem rgba(77,130,255,0.28));

}

.memory-slice {

  cursor:
    pointer;

  outline:
    none;

  opacity:
    0.7;

  filter:
    saturate(0.86)
    brightness(0.72);

  transition:
    opacity 0.34s ease,
    filter 0.34s ease;

}

.memory-slice:focus,
.memory-slice:focus-visible,
.memory-slice *:focus,
.memory-slice *:focus-visible {

  outline:
    none;

}

.memory-slice.active {

  opacity:
    1;

  filter:
    saturate(1.05)
    brightness(1);

}

.memory-slice image {

  transition:
    transform 0.52s cubic-bezier(.2,.8,.18,1);

  transform-origin:
    center;

}

.memory-slice.active image {

  transform:
    scale(1.035);

}

.memory-slice-shade {

  fill:
    rgba(0,0,0,0.34);

  pointer-events:
    none;

  transition:
    fill 0.34s ease;

}

.memory-slice.active .memory-slice-shade {

  fill:
    rgba(0,0,0,0.08);

}

.memory-slice.active .memory-slice-border {

  stroke:
    rgba(255,255,255,0.95);

  stroke-width:
    0.62;

}

.memory-slice-border {

  fill:
    none;

  stroke:
    rgba(255,255,255,0.72);

  stroke-width:
    0.42;

  vector-effect:
    non-scaling-stroke;

  pointer-events:
    none;

}

.memory-hit-area {

  fill:
    rgba(255,255,255,0.001);

  stroke:
    transparent;

  pointer-events:
    all;

}

body.light-theme .map-memory-svg {

  filter:
    drop-shadow(0 0 1.4rem rgba(77,130,255,0.24));

}

body.light-theme .memory-slice-border {

  stroke:
    rgba(0,0,0,0.62);

}

@keyframes mapDotPulse {

  0%,
  100% {

    transform:
      translate(-50%, -50%)
      scale(1);

    box-shadow:
      0 0 0 0 rgba(255,21,21,0.38),
      0 0 14px rgba(255,21,21,0.42);

  }

  50% {

    transform:
      translate(-50%, -50%)
      scale(1.48);

    box-shadow:
      0 0 0 0.45rem rgba(255,21,21,0),
      0 0 20px rgba(255,21,21,0.58);

  }

}

/* ========================= */
/* GRID */
/* ========================= */




.intro-image::before {

  opacity: 0.45;

  mix-blend-mode: screen;

  content: "";

  position: absolute;
  inset: 0;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(77,130,255,0.04) 0px,
      rgba(77,130,255,0.04) 1px,
      transparent 1px,
      transparent 80px
    );

}

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

/* ========================= */
/* 1200 */
/* ========================= */

/* ========================= */
/* 1200 */
/* ========================= */

/* ========================= */
/* 1200 */
/* ========================= */

@media (max-width: 1200px) {

  .intro-section {

    gap: 3em;

    padding:
      14em
      4em
      2em;

  }

  .theme-switcher {

    left: -2.1em;

  }

  .theme-toggle,
  .theme-option {

    width: 4.7em;
    height: 4.7em;

  }

  .theme-core {

    width: 3.15em;
    height: 3.15em;

  }

  .theme-options {

    width: 8.5em;
    height: 11em;

  }

 

}

/* ========================= */
/* 768 */
/* ========================= */

@media (max-width: 768px) {

  .intro-section {

    flex-direction: column-reverse;

    gap: 1.5em;

    padding:
      12em
      2.5em
      2em;

  }

  .intro-left,
  .intro-right {

    width: 100%;

  }

  .intro-left {

    position: relative;

    top: 0;

  }

  .intro-right {

    display: flex;

  }

  .intro-image {

    height: auto;

    min-height: 0;

    max-height: none;

    aspect-ratio: auto;

    padding: 0;

    display: flex;

    justify-content: flex-start;

    align-items: flex-start;

  }

 

  .theme-switcher {

    left: -2em;

  }

  .theme-toggle,
  .theme-option {

    width: 4.4em;
    height: 4.4em;

  }

  .theme-core {

    width: 2.95em;
    height: 2.95em;

  }

  .theme-options {

    width: 8em;
    height: 10em;

  }

}

/* ========================= */
/* 480 */
/* ========================= */

@media (max-width: 480px) {

  .intro-section {

    padding:
      10em
      1.5em
      2em;

    gap: 1em;

  }

  .intro-image {

    aspect-ratio: auto;

  }

  .map-memory-wheel {

    width:
      30%;

    transform:
      translate(0, -50%)
      scale(0.24)
      rotate(-10deg);

  }

  .map-stage.memory-open .map-memory-wheel {

    transform:
      translate(0, -50%)
      scale(1)
      rotate(0deg);

  }

  .theme-switcher {

    left: -1.85em;

  }

  .theme-toggle,
  .theme-option {

    width: 4em;
    height: 4em;

  }

  .theme-core {

    width: 2.7em;
    height: 2.7em;

  }

  .theme-options {

    width: 7em;
    height: 9em;

  }



}


.intro-section {

  opacity: 0;

  transform:
    translateY(2em);

  transition:
    opacity 1.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.45s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    opacity,
    transform;

}

/* ========================= */
/* TEXT DELAY */
/* ========================= */

.intro-text {

  opacity: 0;

  transform:
    translateY(1em);

  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay:
    0.32s;

}

.intro-section.intro-visible {

  opacity: 1;

  transform:
    translateY(0em);

}

.intro-section.intro-visible .intro-text {

  opacity: 1;

  transform:
    translateY(0em);

}

/* ========================= */
/* THEME SWITCHER */
/* ========================= */

.theme-switcher {

  position: fixed;

  left: -2.2em;

  top: 50%;

  transform:
    translateY(-50%);

  z-index: 3000;

  display: flex;

  align-items: center;

}

/* ========================= */
/* MAIN BUTTON */
/* ========================= */

.theme-toggle {

  z-index: 99;

  width: 5em;
  height: 5em;

  border-radius: 999px;

  cursor: pointer;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background 0.35s ease,
    border-color 0.35s ease;

}

/* ========================= */
/* ACTIVE DARK */
/* ========================= */

.theme-switcher.dark-active .theme-toggle {

  background:
    rgba(0,0,0,0.94);

  border:
    0.32em solid
    #4D82FF;

  box-shadow:
    0 0 2.8em rgba(77,130,255,0.42);

}

.theme-switcher.dark-active .theme-core {

  background: #000;

}

/* ========================= */
/* ACTIVE LIGHT */
/* ========================= */

.theme-switcher.light-active .theme-toggle {

  background:
    rgba(255,255,255,0.98);

  border:
    0.32em solid
    #FFD84D;

  box-shadow:
    0 0 2.8em rgba(0,0,0,0.34);

}

.theme-switcher.light-active .theme-core {

  background: #000;

}

.theme-switcher.light-active .theme-core {

  background: #000;

}

.theme-switcher.light-active .theme-core {

  background: #fff;

}

/* ========================= */
/* INNER CORE */
/* ========================= */

.theme-core {

  width: 6em;
  height: 6em;

  border-radius: 999px;

  flex-shrink: 0;

  transition:
    background 0.35s ease;

}

/* ========================= */
/* OPTIONS */
/* ========================= */

.theme-options {

  position: absolute;

  left: 0;

  top: 0;

  width: 9em;
  height: 12em;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.16s ease;

}

/* ========================= */
/* ACTIVE */
/* ========================= */

.theme-switcher.active .theme-options {

  opacity: 1;

  pointer-events: auto;

}

/* ========================= */
/* OPTION */
/* ========================= */

.theme-option {

  position: absolute;

  z-index: 95;

  left: 0;
  top: 0;

  width: 5em;
  height: 5em;

  border-radius: 999px;

  border: none;

  cursor: pointer;

  opacity: 0;

  will-change:
    transform;

  backface-visibility:
    hidden;

  -webkit-backface-visibility:
    hidden;

  transform-origin:
    left center;

  transition:
    transform 0.34s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.18s ease;

}

/* ========================= */
/* START */
/* ========================= */

.dark-option,
.light-option {

  transform:
    translate3d(0em, 0em, 0)
    scale(0.02);

}

/* ========================= */
/* TOP */
/* ========================= */

.theme-switcher.active .dark-option {

  opacity: 1;

  transform:
    translate3d(105%, -80%, 0)
    scale(1);

}

.theme-switcher.active .light-option {

  opacity: 1;

  transform:
    translate3d(105%, 80%, 0)
    scale(1);

}

/* ========================= */
/* DELAY */
/* ========================= */

.theme-switcher.active .dark-option {

  transition-delay:
    0.01s;

}

.theme-switcher.active .light-option {

  transition-delay:
    0.01s;

}

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




/* ========================= */
/* DARK */
/* ========================= */

.dark-option {

  background: #000;

  border:
    0.32em solid
    #4D82FF;


}

/* ========================= */
/* LIGHT */
/* ========================= */

.light-option {

  background: #fff;

  border:
    0.32em solid
    #FFD84D;


}

/* ========================= */
/* THEME VARIABLES */
/* ========================= */

:root {

  --map-filter:
  none;

  --bg:
    #000;

  --text:
    #fff;

  --muted:
    rgba(255,255,255,0.82);

  --primary:
    #4D82FF;

  --secondary:
    #FFD84D;

  --border-glow:
    rgba(77,130,255,0.42);

  --card-overlay:
    rgba(255,255,255,0.78);

  --card-marquee:
    #000;
    

}

/* ========================= */
/* LIGHT THEME */
/* ========================= */

/* ========================= */
/* LIGHT THEME */
/* ========================= */

body.light-theme {

  --map-filter:
    none;

  --bg:
    #fff;

  --text:
    #000;

  --muted:
    rgba(0,0,0,0.78);

  --primary:
    #FFD84D;

  --secondary:
    #4D82FF;

  --border-glow:
    rgba(255,216,77,0.42);

  background-color:
    #fff !important;

  color:
    #000 !important;

  --card-overlay:
    #000;

  --card-marquee:
    #fff;

}

/* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= */



/* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= */


/* ========================= */
/* PHOTO SECTION */
/* ========================= */

.photo-section {

  opacity: 0;

  transition:
    opacity 1.45s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    opacity;

  --rotate: -13.4deg;

  position: relative;

  width: 100%;

  height:
    clamp(24rem, 52vw, 68rem);

  overflow: hidden;

  background: var(--bg);

}

/* ========================= */
/* PHOTO VISIBLE */
/* ========================= */

.photo-section.photo-visible {

  opacity: 1;

  transform:
    translateY(0rem);

}

/* ========================= */
/* TRACK */
/* ========================= */

.photo-track {

  position: absolute;

  top: 50%;
  left: 50%;

  display: flex;

  width: max-content;

  transform:
    translate(-50%, -50%)
    rotate(var(--rotate));

  transform-origin: center;


  will-change:
    transform;

  cursor: grab;

  touch-action:
    none;

  user-select: none;
  
  pointer-events: auto;

}

.photo-track.dragging {

  cursor: grabbing;

}

/* ========================= */
/* ROW */
/* ========================= */

.photo-row {

  display: flex;

  flex-shrink: 0;

}

/* ========================= */
/* CARD */
/* ========================= */

.photo-card {

  flex-shrink: 0;

  width:
    clamp(14rem, 28vw, 40rem);

  aspect-ratio: 4 / 3;

  overflow: hidden;

}

/* ========================= */
/* IMAGE */
/* ========================= */

.photo-card img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  pointer-events: auto;

  user-select: none;

  -webkit-user-drag: none;

  -webkit-touch-callout: none;

  drag-select: none;

}

/* ========================= */
/* ANIMATION */
/* ========================= */




/* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= *//* ========================= */

/* ========================= */
/* INFO */
/* ========================= */

.info-section {

  opacity: 0;

  transition:
    opacity 1.45s cubic-bezier(0.22, 1, 0.36, 1);

  will-change:
    opacity;

  width: 100%;

  padding:
    clamp(2rem, 7vw, 8rem)
    clamp(2rem, 7vw, 8rem);

  background: var(--bg);

}

.info-section.info-visible {

  opacity: 1;

}

/* ========================= */
/* INNER */
/* ========================= */

.info-inner {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: clamp(2rem, 4vw, 2rem);

}


.info-cards-wrap {

  width: fit-content;

  margin: 0 auto;

}

.info-bottom-text {

  width: 100%;

  margin-top: 2rem;

}

/* ========================= */
/* LABEL */
/* ========================= */
.info-label {

  color: var(--text);

  font-size: 1rem;

  letter-spacing: 0.35em;

}

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

.info-content {

  width: min(100%, 66rem);

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 2rem;

}


.info-heading {

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  gap: 0.8rem;

}

/* ========================= */
/* TITLE */
/* ========================= */

.info-title {

  color: var(--secondary);

  font-size:
    clamp(2.4rem, 4vw, 4.8rem);

  line-height: 0.9;

  text-transform: uppercase;

}
/* ========================= */
/* TEXT */
/* ========================= */

.info-text {

  color: var(--muted);

  font-size:
    clamp(1rem, 1.1vw, 1.15rem);

  line-height: 1.8;

  font-weight: 300;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  text-align: left;

}

.info-cards {

  width: min(100%, 60rem);

}

/* ========================= */
/* CARDS */
/* ========================= */

.info-cards {

  display: flex;

  justify-content: center;

  gap:
   clamp(2rem, 8vw, 6rem);

  width: 100%;

  flex-wrap: wrap;

}

.info-project {

  width:
    clamp(16rem, 26vw, 30rem);

  display: flex;

  flex-direction: column;

  gap:
    clamp(1rem, 1.6vw, 1.45rem);

}

.project-caption {

  order: 2;

  width: 100%;

  color:
    var(--muted);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  line-height: 1.55;

}

.project-caption h3 {

  margin:
    0 0 0.45rem;

  color:
    var(--secondary);

  font-family:
    "Morgenta";

  font-size:
    clamp(1rem, 1.35vw, 1.45rem);

  line-height: 1;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

}

.project-caption p {

  margin: 0;

  font-size:
    clamp(0.92rem, 1vw, 1.06rem);

  letter-spacing: 0;

}

@media (max-width: 900px) {

  .info-cards {

    gap:
      clamp(3rem, 8vw, 5rem);

  }

  .info-project {

    width:
      min(100%, 24rem);

    flex-direction:
      column;

  }

  .project-caption {

    order: -1;

  }

}

/* ========================= */
/* CARD */
/* ========================= */

.info-card {

  width:
    100%;

  flex:
    0 0 auto;

  aspect-ratio: 3 / 4;

  overflow: hidden;

  position: relative;

  background: #fff;

  isolation: isolate;

  border-radius: 1.8rem;

  transform:
    translateZ(0);

  backface-visibility:
    hidden;

  border:
    1px solid transparent;

  transition:
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;

}

/* ========================= */
/* CARD OUTLINE */
/* ========================= */

.info-card.active {

  border-color:
    #4D82FF;

  box-shadow:
    0 0 50px
    rgba(35, 101, 255, 0.541);

}

/* ========================= */
/* LIGHT THEME */
/* ========================= */

body.light-theme .info-card.active {

  box-shadow:
    0 0 50px
    rgba(35, 101, 255, 0.541);

}



.info-card img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  display: block;

  opacity: 0.38;

  transform:
    scale(1.08);

  transition:
    opacity 0.22s ease;

  will-change:
    opacity,
    transform;

}

/* ========================= */
/* OVERLAY */
/* ========================= */

.info-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  border-radius: inherit;

  pointer-events: none;

  backdrop-filter:
    blur(34px);

  -webkit-backdrop-filter:
    blur(34px);

  background:

    linear-gradient(
      135deg,
      rgba(77,130,255,0.55) 0%,
      rgba(255,216,77,0.42) 50%,
      rgba(255,255,255,0.18) 100%
    );

  mix-blend-mode: normal;

  opacity: 1;

  transition:
    opacity 0.22s ease;

  will-change:
    opacity;

}


body.light-theme .info-card::after {

  background:

    linear-gradient(
      135deg,
      rgba(255,216,77,0.52) 0%,
      rgba(77,130,255,0.38) 55%,
      rgba(0,0,0,0.14) 100%
    );

}

.card-marquee {

  position: absolute;

  left: 0;

  bottom:
    clamp(1.2rem, 3vw, 2.8rem);

  width: 100%;

  overflow: hidden;

  z-index: 4;

  pointer-events: none;

  padding:
    1rem 0;

  transition:
    opacity 0.24s ease;

}

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

/* ========================= */
/* ACTIVE */
/* ========================= */

.info-card.active::after {

  opacity: 0;

}

.info-card.active .card-marquee {

  opacity: 0;

}

.info-card.active img {

  opacity: 1;

  transform:
    scale(1.08);

}

@media (hover: hover) and (pointer: fine) {

  .info-card:hover {

    border-color:
      #4D82FF;

    box-shadow:
      0 0 50px
      rgba(35, 101, 255, 0.541);

  }

  body.light-theme .info-card:hover {

    box-shadow:
      0 0 50px
      rgba(35, 101, 255, 0.541);

  }

}

.info-card.details-open img {

  filter:
    blur(14px)
    saturate(0.86)
    brightness(0.62);

}

body.light-theme .info-card.details-open img {

  filter:
    blur(14px)
    saturate(0.9)
    brightness(0.78);

}

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {

  .info-card:has(.card-info-toggle:hover) img {

    filter:
      blur(14px)
      saturate(0.86)
      brightness(0.62);

  }

  body.light-theme .info-card:has(.card-info-toggle:hover) img {

    filter:
      blur(14px)
      saturate(0.9)
      brightness(0.78);

  }

  .card-info-toggle:hover ~ .card-details {

    opacity: 1;

    pointer-events: none;

    transform:
      translateX(0)
      scaleX(1);

  }

  .card-info-toggle:hover {

    background:
      #4D82FF;

    color:
      #fff;

    border-color:
      #4D82FF;

    transform:
      scale(1.05);

    box-shadow:
      0 0 18px rgba(77,130,255,0.34);

  }

}

@keyframes smokeMorph {

  0% {

    transform:
      scale(1)
      rotate(-4deg)
      translate(-2%, -1%);

    filter:
      blur(54px)
      contrast(140%)
      hue-rotate(0deg);

  }

  50% {

    transform:
      scale(1.08)
      rotate(3deg)
      translate(2%, 2%);

    filter:
      blur(62px)
      contrast(180%)
      hue-rotate(12deg);

  }

  100% {

    transform:
      scale(1.16)
      rotate(8deg)
      translate(4%, -2%);

    filter:
      blur(72px)
      contrast(220%)
      hue-rotate(-10deg);

  }

}

@keyframes cloudFloat {

  0% {

    transform:
      translate3d(-3%, -2%, 0)
      scale(1);

  }

  50% {

    transform:
      translate3d(2%, 3%, 0)
      scale(1.08);

  }

  100% {

    transform:
      translate3d(4%, -1%, 0)
      scale(1.14);

  }

}




/* ========================= */
/* CARD MARQUEE */
/* ========================= */

.card-marquee {

  position: absolute;

  left: 0;

  bottom:
    clamp(1.2rem, 3vw, 2.8rem);

  width: 100%;

  overflow: hidden;

  z-index: 8;

  pointer-events: none;

  padding:
    1rem 0;

}

/* ========================= */
/* TRACK */
/* ========================= */

.card-marquee-track {

  display: flex;

  width: max-content;

  animation:
    cardMarquee 18s linear infinite;

}

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

.card-marquee span {

  display: flex;

  align-items: center;

  white-space: nowrap;

  padding-right: 3rem;

  color:
    var(--card-marquee);

  font-size:
    clamp(1rem, 1vw, 1.45rem);

  letter-spacing:
    0.22em;

  text-transform:
    uppercase;

  font-family:
    "Morgenta";

}


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



/* ========================= */
/* LOOP */
/* ========================= */

@keyframes cardMarquee {

  from {

    transform:
      translateX(0);

  }

  to {

    transform:
      translateX(-50%);

  }

}




/* ========================= */
/* CARD BUTTONS */
/* ========================= */

.card-buttons {

  position: absolute;

  left:
    clamp(1rem, 2vw, 2rem);

  right:
    clamp(1rem, 2vw, 2rem);

  bottom:
    clamp(1rem, 2vw, 1.8rem);

  display: flex;

  gap:
    clamp(0.6rem, 1vw, 1rem);

  z-index: 12;

  opacity: 0;

  pointer-events: none;

  transition:
    opacity 0.08s linear;

}

/* ========================= */
/* ACTIVE */
/* ========================= */

.info-card.active .card-buttons {

  opacity: 1;

  pointer-events: auto;

}

.card-info-toggle {

  position: absolute;

  top:
    clamp(0.85rem, 1.5vw, 1.35rem);

  right:
    clamp(0.85rem, 1.5vw, 1.35rem);

  width:
    clamp(2.6rem, 3.4vw, 3.25rem);

  height:
    clamp(2.6rem, 3.4vw, 3.25rem);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border:
    2px solid #4D82FF;

  border-radius: 50%;

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

  color:
    #4D82FF;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  font-size:
    clamp(1rem, 1.2vw, 1.28rem);

  font-weight: 900;

  line-height: 1;

  cursor: pointer;

  z-index: 14;

  opacity: 0;

  pointer-events: none;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 0 14px rgba(77,130,255,0.14);

  transition:
    opacity 0.08s linear,
    transform 0.18s ease,
    background 0.18s ease,
    color 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;

}

.card-info-toggle span {

  display: block;

  transform:
    scaleX(-1);

}

.info-card.active .card-info-toggle {

  opacity: 1;

  pointer-events: auto;

}

.info-card.details-open .card-info-toggle {

  background:
    #4D82FF;

  color:
    #fff;

  border-color:
    #4D82FF;

  transform:
    scale(1.05);

  box-shadow:
    0 0 18px rgba(77,130,255,0.34);

}

body.light-theme .card-info-toggle {

  background:
    rgba(255,255,255,0.9);

  color:
    #4D82FF;

  border-color:
    #4D82FF;

  box-shadow:
    0 0 14px rgba(77,130,255,0.16);

}

body.light-theme .info-card.details-open .card-info-toggle {

  background:
    #4D82FF;

  color:
    #fff;

  border-color:
    #4D82FF;

  box-shadow:
    0 0 18px rgba(77,130,255,0.34);

}

.card-details {

  position: absolute;

  top:
    clamp(4rem, 5.2vw, 5.4rem);

  right:
    clamp(0.85rem, 1.5vw, 1.35rem);

  width:
    min(76%, 21rem);

  max-height:
    calc(100% - 8.8rem);

  z-index: 13;

  padding:
    clamp(1rem, 1.6vw, 1.35rem);

  border:
    1px solid rgba(255,255,255,0.14);

  border-radius:
    1rem;

  background:
    rgba(0,0,0,0.58);

  color:
    #fff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  opacity: 0;

  pointer-events: none;

  transform:
    translateX(1.2rem)
    scaleX(0.92);

  transform-origin:
    top right;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  box-shadow:
    0 24px 60px rgba(0,0,0,0.28);

  transition:
    opacity 0.22s ease,
    transform 0.22s ease,
    filter 0.22s ease;

}

body.light-theme .card-details {

  border-color:
    rgba(77,130,255,0.22);

  background:
    rgba(255,255,255,0.86);

  color:
    #000;

  box-shadow:
    0 24px 60px rgba(77,130,255,0.18);

}

.card-details ul {

  margin: 0;
  padding: 0;

  list-style: none;

  display: grid;

  gap:
    clamp(0.62rem, 1vw, 0.9rem);

}

.card-details li {

  position: relative;

  padding-left:
    1.05rem;

  font-size:
    clamp(0.76rem, 0.92vw, 0.95rem);

  line-height: 1.42;

  letter-spacing: 0;

}

.card-details li::before {

  content: "";

  position: absolute;

  top: 0.58em;
  left: 0;

  width: 0.42rem;
  height: 0.42rem;

  border-radius: 50%;

  background:
    #4D82FF;

}

body.light-theme .card-details li::before {

  background:
    #4D82FF;

}

.info-card.details-open .card-details {

  opacity: 1;

  pointer-events: auto;

  transform:
    translateX(0)
    scaleX(1);

}

/* ========================= */
/* BUTTON */
/* ========================= */

.card-btn {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  flex: 1;

  height:
    clamp(2.9rem, 4vw, 4rem);

  border:
    2px solid #4D82FF;

  border-radius:
    1rem;

  background:
    #fff;

  color:
    #4D82FF;

  font-family:
    "Morgenta";

  font-size:
    clamp(0.68rem, 0.85vw, 0.92rem);

  letter-spacing:
    0.16em;

  text-transform:
    uppercase;

  cursor: pointer;

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 0 14px
    rgba(77,130,255,0.14);

  transition:
    background 0.18s ease,
    color 0.18s ease,
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;

}

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

.card-btn:hover {

  background:
    #4D82FF;

  color:
    #fff;

  border-color:
    #4D82FF;

  box-shadow:
    0 0 18px
    rgba(77,130,255,0.34);

  transform:
    scale(1.04);

}


/* ========================= */
/* ABOUT */
/* ========================= */

.about-section {

  width: 100%;

  display: flex;

  gap: clamp(2rem, 4vw, 6rem);

  padding:
    4rem
    clamp(3em, 7vw, 8em);

  align-items: flex-start;

  justify-content: center;

  background: var(--bg);

}



.about-section.about-visible {

  opacity: 1;

  transform:
    translateY(0);

}


/* ========================= */
/* CONTACT SECTION */
/* ========================= */

.contact-section {

  width: 100%;

  padding:
    clamp(2.4rem, 4vw, 4rem)
    clamp(2rem, 7vw, 8rem)
    clamp(2.8rem, 4.5vw, 4.5rem);

  display: flex;

  justify-content: center;

  align-items: center;

  background:
    var(--bg);

  opacity: 0;

  clip-path:
    inset(0 0 2rem 0);

  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);

}

.contact-section.contact-visible {

  opacity: 1;

  clip-path:
    inset(0 0 0 0);

}

.contact-inner {

  width:
    min(100%, 42rem);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  gap:
    clamp(1rem, 2vw, 2rem);

  text-align:
    center;

}

.contact-inner::before,
.contact-inner::after {

  content: "";

  display: block;

  width:
    clamp(7rem, 18vw, 16rem);

  height: 2px;

  border-radius:
    999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(77,130,255,0.18),
      rgba(77,130,255,0.9),
      rgba(77,130,255,0.18),
      transparent
    );

  box-shadow:
    0 0 14px rgba(77,130,255,0.28);

  transform:
    scaleX(0.22);

  transform-origin:
    center;

  animation:
    contactLinePulse 2.6s ease-in-out infinite;

}

@keyframes contactLinePulse {

  0%,
  100% {

    opacity: 0.34;

    transform:
      scaleX(0.22);

  }

  48%,
  58% {

    opacity: 1;

    transform:
      scaleX(1);

  }

}


/* ========================= */
/* LEFT */
/* ========================= */

.about-left {

  flex: 1;

  position: relative;

  display: flex;

  justify-content: flex-end;

}
/* ========================= */
/* RIGHT */
/* ========================= */

.about-right {

  flex: 1;

}

/* ========================= */
/* INNER */
/* ========================= */

.about-inner {

  width: 100%;

  max-width: 32em;

}



/* ========================= */
/* LABEL */
/* ========================= */

.about-label {

  display: block;

  margin-bottom: 1rem;

  color: var(--text);

  font-size: 1rem;

  letter-spacing: 0.35em;

}

/* ========================= */
/* TITLE */
/* ========================= */

.about-title {

  margin: 0 0 2rem;

  color: var(--secondary);

  font-size:
    clamp(2.4rem, 4vw, 4.8rem);

  line-height: 0.9;

  font-weight: 700;

  text-transform: uppercase;

}

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

.about-text {

  grid-column:
    1 / -1;

  justify-self:
    center;

  color: var(--muted);

  font-size:
    clamp(1rem, 1.1vw, 1.15rem);

  line-height: 1.75;

  font-weight: 300;

  font-family:
    Arial,
    Helvetica,
    sans-serif;

  width:
    min(100%, 52rem);

  max-width:
    52rem;

  text-align:
    center;

  margin:
    clamp(1.8rem, 3vw, 3rem)
    auto
    0;

}



/* ========================= */
/* SOCIAL SECTION */
/* ========================= */

.social-section {

  overflow: hidden;

  width: 100%;

  padding:
    clamp(4rem, 6vw, 6rem)
    clamp(2rem, 7vw, 8rem)
    3rem;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  gap: 2rem;

  background:
    var(--bg);

  text-align: center;

}



.social-section.social-visible {

  opacity: 1;

  transform:
    translateY(0);

}

/* ========================= */
/* LABEL */
/* ========================= */

.social-label {

  display: none;

}

/* ========================= */
/* TITLE */
/* ========================= */

.social-title {

  color:
    var(--secondary);

  font-size:
    clamp(2.4rem, 4vw, 4.8rem);

  line-height:
    0.9;

  font-weight:
    700;

  text-transform:
    uppercase;

  text-align:
    center;

  max-width:
    12ch;

  margin:
    0 auto;

}

/* ========================= */
/* ICONS */
/* ========================= */

.social-icons {

  display: flex;

  align-items: center;

  justify-content: center;

  gap:
    clamp(1rem, 2vw, 2rem);

  margin-top: 1rem;

}

/* ========================= */
/* ICON */
/* ========================= */

.social-icon {

  width:
    clamp(4rem, 5vw, 5.5rem);

  height:
    clamp(4rem, 5vw, 5.5rem);

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius:
    1.4rem;

  border:
    1px solid rgba(255,255,255,0.14);

  background:
    rgba(255,255,255,0.03);

  color:
    var(--text);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;

}

/* ========================= */
/* SVG */
/* ========================= */

.social-icon svg {

  width: 42%;

  height: 42%;

}

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

.social-icon:hover {

  transform:
    translateY(-0.35rem)
    scale(1.06);

  border-color:
    rgba(255,255,255,0.34);

  background:
    rgba(255,255,255,0.08);

  box-shadow:
    0 0 35px rgba(255,255,255,0.14);

}

/* ========================= */
/* LIGHT THEME */
/* ========================= */

body.light-theme .social-icon {

  border:
    1px solid rgba(0,0,0,0.12);

  background:
    rgba(0,0,0,0.03);

}

body.light-theme .social-icon:hover {

  border-color:
    rgba(0,0,0,0.24);

  background:
    rgba(0,0,0,0.06);

  box-shadow:
    0 0 35px rgba(0,0,0,0.12);

}

/* ========================= */
/* FOOTER */
/* ========================= */

.footer-copy {

  margin-top: 4rem;

  text-align: center;

  font-family:
    "Pixellettersfull",
    monospace;

  font-size:
    1rem;

  color:
    var
#fff
(--text) !important;

  user-select: none;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 0.45rem;

}

/* тільки цифри */

.footer-copy .year {

  font-size:
    1.45rem;

  letter-spacing:
    0.22em;

  line-height: 1;

}

/* символ © */

.footer-copy .copy-symbol {

  font-size:
    0.8rem;

  opacity: 0.8;

  transform:
    translateY(-0.05rem);

}

@font-face {

  font-family: "Pixellettersfull";

  src:
    url("../assets/fonts/Pixellettersfull-BnJ5.ttf")
    format("truetype");

}

/* ========================= */
/* ABOUT CONTACT */
/* ========================= */


/* ========================= */
/* BUTTON */
/* ========================= */

.about-contact-btn {

  min-width:
    clamp(17.5rem, 20vw, 20rem);

  height:
    clamp(4.65rem, 4.9vw, 5.15rem);

  padding:
    0 2.4rem;

  display: flex;

  align-items: center;

  justify-content: center;

  border:
    3px solid #4D82FF;

  border-radius:
    1.08rem;

  background:
    rgba(255,255,255,0.03);

  color:
    #4D82FF;

  text-decoration: none;

  text-transform: uppercase;

  letter-spacing:
    0.18em;

  font-size:
    clamp(0.78rem, 0.86vw, 0.98rem);

  font-family:
    "Morgenta";

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  box-shadow:
    0 0 18px rgba(77,130,255,0.24),
    inset 0 0 14px rgba(77,130,255,0.08);

  transition:
    background 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    transform 0.22s ease;

}

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

.about-contact-btn:hover {

  background:
    #4D82FF;

  color:
    #fff;

  border-color:
    #4D82FF;

  box-shadow:
    0 0 28px rgba(77,130,255,0.46),
    inset 0 0 18px rgba(255,255,255,0.1);

  transform:
    translateY(-0.2rem)
    scale(1.03);

}

.about-content {

  width: 100%;

  display: grid;

  grid-template-columns:
    1fr 1fr;


  align-items: start;

}


@media (max-width: 768px) {

  .about-section {

    padding:
      4rem 1.5rem;

  }

  .about-content {

    grid-template-columns:
      1fr;

  }

  .about-left {

    flex: none;

    width: 100%;

    max-width: 100%;

    padding-right: 0;

    justify-content: flex-start;

  }

  .about-inner {

    width: 100%;

    max-width: 100%;

  }

  .about-text {

    width: 100%;

    max-width: 100%;

    margin-top:
      1.6rem;

    display: block;

    white-space: normal;

  }

  .about-contact-btn {

    width: 100%;

    min-width: 0;

  }

  .contact-inner::before,
  .contact-inner::after {

    display: block;

    width:
      clamp(9.5rem, 56vw, 15rem);

    height:
      3px;

    opacity:
      0.72;

    box-shadow:
      0 0 18px rgba(77,130,255,0.42),
      0 0 34px rgba(77,130,255,0.18);

  }

}


/* ========================= */
/* SCROLL REVEAL */
/* ========================= */

.about-section,
.social-section {

  opacity: 0;

  clip-path:
    inset(0 0 2rem 0);

  transition:
    opacity 1s cubic-bezier(0.22, 1, 0.36, 1),
    clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);

}

/* ACTIVE */

.about-section.about-visible,
.social-section.social-visible {

  opacity: 1;

  clip-path:
    inset(0 0 0 0);

}


/* ========================= */
/* GALLERY MODAL */
/* ========================= */

.gallery-modal{

  position:fixed;

  inset:0;

  display:flex;

  justify-content:center;

  align-items:center;

  background:rgba(0,0,0,.88);

  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);

  opacity:0;

  visibility:hidden;

  transition:
    opacity .35s ease,
    visibility .35s ease;

  z-index:999999;

}

.gallery-modal.active{

  opacity:1;

  visibility:visible;

}

.gallery-modal-content{

  transform:scale(.9);

  transition:
    transform .35s ease;

}

.gallery-modal.active
.gallery-modal-content{

  transform:scale(1);

}

.gallery-modal-content img{

  max-width:90vw;
  max-height:90vh;

  object-fit:contain;

  display:block;

  border-radius:20px;

  box-shadow:
    0 0 40px rgba(0,0,0,.5);

}

.photo-card{

  cursor:zoom-in;

}