:root {
  --bg: #0b0b0c;
  --fg: #f2f2f2;
  --muted: rgba(242,242,242,.7);
  --line: rgba(242,242,242,.12);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

/* layout */

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px;
}

/* header */

.header { 
  position: sticky; 
  top: 0; 
  z-index: 10; 
  background: rgba(0, 0, 0, 0.1); 
  backdrop-filter: blur(6px); 
  border-bottom: 1px solid var(--line); 
}

.header.overlay {
   position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;

  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.92),
    rgba(0, 0, 0, 0.1)
  );

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

  /* border-bottom: 1px solid rgba(255,255,255,0.08); */
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 64px;
}

.logo {
  font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: large;
}

.nav {
  display: flex;
  gap: 18px;
  font-size: 13px;
}

.nav a,
.nav a:visited,
.nav a:hover,
.nav a:active,
.nav a:focus {
  text-decoration: none;
}

.nav a {
  color: rgba(242,242,242,.45);
  transition: ease;
}

.nav a.active {
  color: #f2f2f2;
}

/* HOME */

.bg-layer{
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: opacity 800ms ease;
  z-index: 0;
}

.bg-hero{
  background-image: url("assets/images/bg-main.jpg");
  opacity: 1;
}

.bg-about{
  background-image: url("assets/images/bg-about.jpg");
  opacity: 0;
}

.bg-hero.hide { opacity: 0; }
.bg-about.show { opacity: 1; }

/* Home scroll transition */
.hero {
  position: relative;
  height: 100vh;
  transition: opacity 700ms ease, transform 700ms ease, height 700ms ease;
}

.hero.fade-out {
  opacity: 0;
  transform: translateY(-20px);
  pointer-events: none;
}

.about-stories {
  position: relative;
  z-index: 2;
  padding: 40px 0 60px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.about-stories .container{
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.about-stories {
  min-height: 120vh;
}
.about-stories {
  margin-top: 40px;
}

.about-stories.show {
  opacity: 1;
  transform: translateY(0);
}

.about-stories.show {
  pointer-events: auto;
}
/* .story-media {
  position: relative;
  height: 360px;
} */

.home .story-media {
  position: relative;
  height: 360px;
}

@media (max-width: 820px) {
  .home .story-media {
    height: 260px;
  }
}

.portfolio-page .story-media {
  height: auto;
}

.portfolio-page .story-media img {
  height: auto;
  object-fit: contain;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-text {
  position: absolute;
  left: 18px;
  bottom: 60px;
  z-index: 2;
  max-width: 70ch;

  background: rgba(0, 0, 0, 0.50);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  padding: 16px 18px;
  border-radius: 18px;
}

.hero-text h1 {
  margin: 0;
  font-size: 32px;
  letter-spacing: 2px;
}

.hero-text p {
  margin-top: 10px;
  color: rgba(242,242,242,.85);
  line-height: 1.6;
}

/* portfolio */

.intro {
  padding: 40px 0 24px;
}

.intro h1 {
  margin: 0;
  font-size: 28px;
}


/* footer */

.footer {
  padding: 24px 18px 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: rgba(242,242,242,.4);
}

/* responsive */

@media (max-width: 900px) {
  .gallery img { grid-column: span 6; }
}

@media (max-width: 560px) {
  .gallery img { grid-column: span 12; }
  .hero-text h1 { font-size: 24px; }
}

/* CONTACT PAGE */

.contact-page {
  background: var(--bg);
}

.contact-hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;

  background:
    radial-gradient(
      900px 700px at 20% 10%,
      rgba(0,0,0,0.25),
      rgba(0,0,0,0.80)
    ),
    linear-gradient(
      to bottom,
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.85)
    );

  pointer-events: none;
}


.contact-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}


/* затемнение поверх фона */
.contact-hero::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(0,0,0,0.25), rgba(0,0,0,0.78)),
    linear-gradient(to bottom, rgba(0,0,0,0.35), rgba(0,0,0,0.85));
  pointer-events: none;
  z-index: 0;
}

.contact-content {
  position: relative;
  z-index: 2; /* ВАЖНО */
  padding-top: 110px;
  padding-bottom: 40px;
}


.contact-top {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 18px;
  align-items: start;
}

.contact-box {
  padding: 16px 18px;
  border-radius: 18px;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.10);

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

.contact-box h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.5px;
}

.contact-box p {
  margin-top: 10px;
  color: rgba(242,242,242,.78);
  line-height: 1.6;
  max-width: 65ch;
}


.contact-title h1 {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.5px;
}

.contact-title p {
  margin-top: 10px;
  color: rgba(242,242,242,.78);
  line-height: 1.6;
  max-width: 65ch;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.contact-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 14px;

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: rgba(242,242,242,.92);
  text-decoration: none;
}

.contact-pill span {
  color: rgba(242,242,242,.55);
}

.services {
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

.services-head h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(242,242,242,.75);
}

.services-head p {
  margin-top: 10px;
  color: rgba(242,242,242,.70);
  line-height: 1.6;
  max-width: 70ch;
}

.services-grid {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 12px;
}

.service-card {
  grid-column: span 4;
  overflow: hidden;
  border-radius: 18px;

  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.service-media {
  position: relative;
  height: 180px;
  overflow: hidden;
}

.service-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(1.02);
  transform: scale(1.02);
}

.service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.10), rgba(0,0,0,0.55));
}

.service-body {
  padding: 14px 14px 15px;
}

.service-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.service-row h3 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.2px;
}

.price {
  font-size: 13px;
  color: rgba(242,242,242,.90);
}

.service-body p {
  margin: 10px 0 0;
  color: rgba(242,242,242,.70);
  line-height: 1.6;
  font-size: 13px;
}

.meta {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(242,242,242,.50);
}

.contact-footer {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  color: rgba(242,242,242,.45);
  font-size: 13px;
}

/* responsive */
@media (max-width: 900px) {
  .contact-top {
    grid-template-columns: 1fr;
  }
  .service-card {
    grid-column: span 6;
  }
}

@media (max-width: 560px) {
  .contact-content {
    padding-top: 96px;
  }
  .service-card {
    grid-column: span 12;
  }
}

/* PORTFOLIO BACKGROUND */

.portfolio-page {
  background: var(--bg);
}

.portfolio-hero {
  position: relative;
  min-height: 100vh;
}

.portfolio-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  filter: saturate(0.95) contrast(1.02);
}

/* dark overlay for readability */
.portfolio-hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(900px 700px at 20% 10%, rgba(0,0,0,0.20), rgba(0,0,0,0.80)),
    linear-gradient(to bottom, rgba(0,0,0,0.25), rgba(0,0,0,0.85));
  pointer-events: none;
}

.portfolio-content {
  position: relative;
  z-index: 2;
  padding-top: 40px;
  padding-bottom: 40px;
}

/* GALLERY: do not crop images */
.gallery-contain {
  margin-bottom: 40px;
}

.gallery-contain .shot {
  grid-column: span 4;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.28);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* fade-in on scroll */
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.gallery-contain .shot.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* key part: keep original aspect ratio, no crop */
.gallery-contain .shot img {
  width: 100%;
  height: auto;      /* important: natural ratio */
  display: block;
  object-fit: contain; /* just in case */
  background: transparent;
}

/* ===== Portfolio "stories" layout ===== */

.story-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 40px;
}

.story {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: center;
}

.story.reverse {
  grid-template-columns: 0.8fr 1.2fr;
}

.story.reverse .story-media {
  order: 2;
}

.story.reverse .story-text {
  order: 1;
}

/* media */
.story-media {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.18);
}

.story-media img {
  width: 100%;
  height: auto;           /* НЕ обрізаємо */
  display: block;
  object-fit: contain;    /* зберігає пропорції */
  background: rgba(0,0,0,0.10);
}

.story-media.fixed { height: 360px; }


/* glass text card */
.glass {
  border-radius: 18px;
  padding: 16px 16px;

  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(255,255,255,0.10);

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

.story-text h2 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: rgba(242,242,242,.86);
}

.story-text p {
  margin: 10px 0 0;
  color: rgba(242,242,242,.72);
  line-height: 1.6;
  font-size: 13px;
}

.story-meta {
  margin-top: 10px;
  font-size: 12px;
  color: rgba(242,242,242,.50);
}

.story-meta.link {
  display: inline-block;
  margin-top: 10px;

  font-size: 12px;
  color: rgba(242,242,242,.55);
  text-decoration: none;

  transition: color 200ms ease;
}

.story-meta.link:hover {
  color: rgba(242,242,242,.85);
}

.story-meta.link::after {
  content: " ↗";
  font-size: 11px;
  opacity: 0.6;
}

/* Mobile: фото зверху, текст знизу */
@media (max-width: 820px) {
  .story,
  .story.reverse {
    grid-template-columns: 1fr;
  }

  .story.reverse .story-media,
  .story.reverse .story-text {
    order: initial;
  }
}

.sound-btn {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 100;

  font-family: inherit;
  font-size: 12px;
  letter-spacing: 1px;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(242,242,242,.85);

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

  cursor: pointer;
}

/* ===== media switch (photo -> gif) ===== */

.media-switch {
  position: relative;
  overflow: hidden;
}

.media-switch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  transition: opacity 500ms ease;
}

/* фото видно зразу */
.media-preview {
  opacity: 1;
  z-index: 1;
}

/* gif спочатку схована */
.media-gif {
  opacity: 0;
  z-index: 2;
}

/* коли gif готова */
.media-switch.is-ready .media-preview {
  opacity: 0;
}

.media-switch.is-ready .media-gif {
  opacity: 1;
}