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

:root {
  --slide-duration: 6s;
  --fade-duration: 1.2s;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ── SLIDESHOW ── */
.slideshow {
  position: fixed;
  inset: 0;
  z-index: 0;
}

.slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlide calc(var(--slide-duration) * 6) ease-in-out infinite;
  /* Ken Burns */
  transform: scale(1.05);
}

/* Gradient slides as placeholders — swap src with real images */
.slide:nth-child(1) {
  background-image: url('media/0-2000x1127.jpg');
  animation-delay: 0s;
}
.slide:nth-child(2) {
  background-image: url('media/Artboard 1 copy 13@2160x.png');
  animation-delay: calc(var(--slide-duration) * 1);
}
.slide:nth-child(3) {
  background-image: url('media/02.jpg');
  animation-delay: calc(var(--slide-duration) * 2);
}
.slide:nth-child(4) {
  background-image: url('media/142.jpg');
  animation-delay: calc(var(--slide-duration) * 3);
}
.slide:nth-child(5) {
  background-image: url('media/IMG_00481.jpg');
  animation-delay: calc(var(--slide-duration) * 4);
}
.slide:nth-child(6) {
  background-image: url('media/Offf_Poster_071.jpg');
  animation-delay: calc(var(--slide-duration) * 5);
}

@keyframes fadeSlide {
  0%    { opacity: 0; transform: scale(1.05); }
  2%    { opacity: 1; transform: scale(1.05); }
  23%   { opacity: 1; transform: scale(1.00); }
  25%   { opacity: 0; transform: scale(1.00); }
  100%  { opacity: 0; transform: scale(1.05); }
}

/* ── OVERLAY (improves legibility) ── */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at center, 
    transparent 30%, 
    rgba(0,0,0,0.30) 100%
  );
}

/* ── LAYOUT ── */
.ui {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  padding: clamp(24px, 5vw, 60px);
  gap: 0;
}

/* ── MIX-BLEND / INVERT TRICK ── */
/* All text is white with mix-blend-mode: difference — stays readable on any bg */
.ui-block {
  color: #ffffff;
  mix-blend-mode: difference;
  font-family: Helvetica, Arial, sans-serif;
}

/* ── TOP ROW ── */
.logo {
  grid-column: 1;
  grid-row: 1;
  align-self: start;
}

.logo svg {
  color: #4d4d4d;
}

.logo-text {
  font-weight: 700;
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  letter-spacing: .06em;
  line-height: 1;
  text-transform: uppercase;
}

.logo-sub {
  font-size: clamp(.55rem, 1vw, .7rem);
  letter-spacing: .3em;
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .7;
}

.tagline {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  justify-self: end;
  text-align: left;
}

.tagline-main {
  font-size: clamp(0.8rem, 1.5vw, 0.8rem);
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: 700;
}

/* ── MIDDLE (empty, fills space) ── */
.middle {
  grid-column: 1 / 3;
  grid-row: 2;
}

/* ── BOTTOM ROW ── */
.contacts {
  grid-column: 1;
  grid-row: 3;
  align-self: end;
}

.contacts-label {
  font-size: clamp(.5rem, .9vw, .65rem);
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 10px;
}

.contact-item {
  font-size: clamp(1rem, 1.5vw, 1rem);
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.25;
}

.contact-item a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 6px; /* increase to move further down */
  text-decoration-color: rgba(255,255,255,.0);
  transition: text-decoration-color .2s;
}

.contact-item a:hover {
  text-decoration-color: rgba(255,255,255,.9);
}

.vat-block {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  justify-self: end;
  text-align: right;
}

.vat-label {
  font-size: clamp(.5rem, .9vw, .65rem);
  text-transform: uppercase;
  opacity: .75;
  margin-bottom: 10px;
}

.vat-item {
  font-size: clamp(1rem, 1.5vw, 1rem);
  line-height: 1.25;
  opacity: .85;
}

.vat-item span {
  opacity: .5;
  margin-right: .5em;
  font-size: .8em;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {

  .slide:nth-child(1) { background-image: url('media/gc@2160x.png'); }
  .slide:nth-child(2) { background-image: url('media/bomp@2160x.png'); }
  .slide:nth-child(3) { background-image: url('media/curo@2160x.png'); }
  .slide:nth-child(4) { background-image: url('media/pasta@2160x.png'); }
  .slide:nth-child(5) { background-image: url('media/alchem@2160x.png'); }
  .slide:nth-child(6) { background-image: url('media/poster@2160x.png'); }

  .ui {
    grid-template-columns: 2fr;
    grid-template-rows: auto auto 1fr auto auto;
    padding: 28px 24px;
  }

  .tagline {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    text-align: left;
    margin-top: 3px;
  }

  .middle {
    grid-column: 1;
    grid-row: 2;
  }

  .contacts {
    grid-column: 1;
    grid-row: 4;
    margin-bottom: 20px;
  }

  .vat-block {
    grid-column: 1;
    grid-row: 5;
    justify-self: start;
    text-align: left;
  }
}