@import url('https://unpkg.com/normalize.css') layer(normalize);

@layer normalize, base, layout, accordion, images, controls, intro;

@layer intro {
  details:nth-of-type(1) {
    animation: panel-in .65s .15s both var(--bounce);
  }

  details:nth-of-type(2) {
    animation: panel-in .65s .23s both var(--bounce);
  }

  details:nth-of-type(3) {
    animation: panel-in .65s .31s both var(--bounce);
  }

  details:nth-of-type(4) {
    animation: panel-in .65s .39s both var(--bounce);
  }

  @keyframes panel-in {
    0% {
      opacity: 0;
      translate: -2rem 1rem;
      scale: .96;
    }
  }
}

@layer base {
  :root {
    color-scheme: light;
    --ease: cubic-bezier(.42, 0, .58, 1);
    --bounce: linear(
      0 0%, .4214 6.61%, .5762 9.59%, .7047 12.55%, .8115 15.61%,
      .8964 18.78%, .9614 22.13%, 1.0078 25.74%, 1.0282 28.18%,
      1.0422 30.82%, 1.0503 33.7%, 1.0527 36.95%, 1.0468 42.53%,
      1.015 58.45%, 1.0045 67.2%, .9987 80.44%, 1 100%
    );
    --speed: .52s;
    --panel-width: 390px;
    --sizing: 58px;
    --ink: #17130f;
    --muted: #665f55;
    --gold: #d39b2c;
    --amber: #f2b84b;
    --glass: rgb(23 19 15 / .74);
    --glass-strong: rgb(23 19 15 / .86);
    --line: rgb(255 255 255 / .2);
  }

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

  html {
    min-height: 100%;
  }

  body {
    min-height: 100vh;
    margin: 0;
    color: var(--ink);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
      linear-gradient(125deg, rgb(255 248 236 / .94), rgb(231 237 230 / .9)),
      url("zdjecie-1.jpg") center / cover fixed;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
      linear-gradient(90deg, rgb(23 19 15 / .05) 1px, transparent 1px 42px),
      linear-gradient(rgb(23 19 15 / .05) 1px, transparent 1px 42px);
    mask: linear-gradient(145deg, transparent 20%, white 72%);
    z-index: -1;
  }

  a {
    color: inherit;
  }

  svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@layer layout {
  .site-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem;
  }

  .business-card {
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: stretch;
    width: min(1120px, calc(100vw - 2rem));
    min-height: 680px;
    overflow: hidden;
    border: 1px solid rgb(255 255 255 / .7);
    border-radius: 24px;
    background: rgb(255 255 255 / .78);
    box-shadow: 0 28px 90px rgb(32 25 16 / .22);
    container-type: inline-size;
  }

  .business-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgb(255 255 255 / .94) 0 38%, rgb(255 255 255 / .12) 62%);
    z-index: -1;
  }

  .column {
    position: relative;
  }

  .content-column {
    z-index: 5;
    flex: 0 0 min(45%, 500px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(2rem, 5vw, 4.5rem);
  }

  .image-column {
    flex: 1;
    min-width: 0;
  }

  .eyebrow {
    margin: 0 0 .9rem;
    color: #745111;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  h1 {
    margin: 0;
    font-size: clamp(2.75rem, 5vw, 5rem);
    line-height: .95;
    letter-spacing: 0;
  }

  .lead {
    max-width: 34rem;
    margin: 1.25rem 0 1.6rem;
    color: var(--muted);
    font-size: 1.05rem;
    line-height: 1.65;
  }

  .quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .7rem;
    margin-bottom: 1.1rem;
  }

  .primary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: .8rem 1rem;
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
  }

  .primary-action {
    gap: .55rem;
    color: #17130f;
    background: linear-gradient(135deg, var(--amber), var(--gold));
    box-shadow: 0 14px 28px rgb(116 81 17 / .24);
  }
}

@layer accordion {
  .accordion {
    display: grid;
    gap: .58rem;
    width: min(100%, var(--panel-width));
  }

  details {
    display: inline-block;
    min-height: var(--sizing);
    overflow: hidden;
    color: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--glass);
    box-shadow: 0 14px 38px rgb(0 0 0 / .18);
    backdrop-filter: blur(18px) saturate(150%);
    transition: background .2s var(--ease), border-radius .35s var(--ease);
  }

  details:hover,
  details[open] {
    background: var(--glass-strong);
  }

  details[open] {
    border-radius: 28px;
  }

  summary {
    display: inline-flex;
    align-items: center;
    gap: .62rem;
    min-height: var(--sizing);
    width: 100%;
    padding: 0 1.2rem;
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    white-space: nowrap;
  }

  summary::-webkit-details-marker {
    display: none;
  }

  summary::marker {
    content: "";
  }

  summary svg {
    flex: 0 0 auto;
    color: var(--amber);
  }

  details::details-content {
    opacity: 0;
    height: 0;
    overflow: clip;
    transition-property: content-visibility, height, opacity;
    transition-duration: var(--speed), calc(var(--speed) * 1.3), calc(var(--speed) * .6);
    transition-behavior: allow-discrete;
    transition-timing-function: var(--ease), var(--bounce), var(--ease);
  }

  details[open]::details-content {
    height: fit-content;
    opacity: 1;
  }

  details,
  details::details-content {
    interpolate-size: allow-keywords;
  }

  .content p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: rgb(255 255 255 / .82);
    line-height: 1.55;
  }
}

@layer images {
  .image-column .img-block {
    position: absolute;
    inset: 0;
  }

  .img-wrapper,
  .img-wrapper img {
    width: 100%;
    height: 100%;
  }

  .img-wrapper {
    opacity: 0;
    scale: 1.04;
    transform-origin: 50% 50%;
    transition: opacity .42s var(--ease), scale .9s var(--bounce), translate .7s var(--bounce);
  }

  .img-wrapper img {
    display: block;
    object-fit: cover;
    object-position: center;
    filter: saturate(.98) contrast(1.05);
  }

  .img-block:first-of-type .img-wrapper,
  .business-card:has(details:nth-of-type(1)[open]) .img-block:nth-of-type(2) .img-wrapper,
  .business-card:has(details:nth-of-type(2)[open]) .img-block:nth-of-type(3) .img-wrapper,
  .business-card:has(details:nth-of-type(3)[open]) .img-block:nth-of-type(4) .img-wrapper,
  .business-card:has(details:nth-of-type(4)[open]) .img-block:nth-of-type(5) .img-wrapper {
    opacity: 1;
    scale: 1;
    translate: 0;
  }

  .business-card:has(details[open]) .img-block:first-of-type .img-wrapper {
    opacity: 0;
    scale: 1.08;
  }

  .business-card:not(:has(details[open])) .img-block:first-of-type .img-wrapper {
    opacity: 1;
  }

  .img-block:nth-of-type(2) img {
    object-position: center;
  }

  .img-block:nth-of-type(3) img,
  .img-block:nth-of-type(5) img {
    object-position: 62% center;
  }

  .image-column::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(90deg, rgb(255 255 255 / .82), transparent 36%),
      linear-gradient(0deg, rgb(23 19 15 / .34), transparent 50%);
    pointer-events: none;
  }
}

@layer controls {
  [data-action] {
    position: absolute;
    left: clamp(1rem, 2vw, 1.5rem);
    z-index: 10;
    display: grid;
    place-items: center;
    width: 42px;
    aspect-ratio: 1;
    padding: 0;
    color: #fff;
    border: 1px solid rgb(255 255 255 / .22);
    border-radius: 50%;
    background: var(--glass);
    cursor: pointer;
    backdrop-filter: blur(16px);
    transition: transform .2s var(--ease), background .2s var(--ease);
  }

  [data-action]:hover {
    transform: translateY(-1px);
    background: var(--glass-strong);
  }

  [data-action="previous"] {
    bottom: calc(1.5rem + 52px);
  }

  [data-action="next"] {
    bottom: 1.5rem;
  }
}

@media (max-width: 860px) {
  .site-shell {
    padding: 1rem;
    place-items: start center;
  }

  .business-card {
    min-height: auto;
    flex-direction: column;
  }

  .business-card::before {
    background: linear-gradient(180deg, rgb(255 255 255 / .96), rgb(255 255 255 / .66));
  }

  .content-column {
    flex-basis: auto;
    padding: 2rem 1.15rem 1.25rem;
  }

  .image-column {
    min-height: 310px;
    order: -1;
  }

  .image-column::after {
    background: linear-gradient(0deg, rgb(255 255 255 / .72), transparent 54%);
  }

  .accordion {
    --panel-width: 100%;
  }

  h1 {
    font-size: clamp(2.35rem, 12vw, 3.4rem);
  }

  .lead {
    font-size: 1rem;
  }

  .quick-actions {
    display: grid;
  }

  .primary-action {
    width: 100%;
  }

  [data-action] {
    left: auto;
    right: 1rem;
  }
}

@media (max-width: 460px) {
  .site-shell {
    padding: .65rem;
  }

  .business-card {
    width: 100%;
    border-radius: 18px;
  }

  .image-column {
    min-height: 240px;
  }

  summary {
    font-size: .95rem;
  }

  .content p {
    font-size: .95rem;
  }
}