:root{
  --bg: #050506;
  --bg2:#07080a;
  --ink: #d7d0bf;
  --muted:#9d9486;
  --gold:#b9a47a;

  --max: 980px;
  --frameMax: 1100px;

  --revealDur: 950ms;
  --revealEase: cubic-bezier(.2,.8,.2,1);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  color:var(--ink);
  background: radial-gradient(1200px 900px at 50% 20%, #0c1014, var(--bg));
  font-family: ui-serif, Georgia, "Times New Roman", serif;
  letter-spacing: 0.01em;
  line-height: 1.6;
  overflow-x:hidden;
}

/* grain + vignette */
.grain{
  position:fixed; inset:0;
  pointer-events:none;
  opacity:.08;
  mix-blend-mode:overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  transform: translateZ(0);
}
.vignette{
  position:fixed; inset:-10%;
  pointer-events:none;
  background: radial-gradient(closest-side, transparent 60%, rgba(0,0,0,.55) 100%);
}

/* sections */
.section{
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 8vh 5vw;
}

.hero{ text-align:center; }
.hero__inner{
  width:min(var(--max), 100%);
  padding: 6vh 0;
}
.hero__mark{
  width:min(520px, 80vw);
  height:auto;
  display:block;
  margin:0 auto 22px;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,.55));
}
.hero__line{
  margin: 0;
  font-size: clamp(18px, 2.2vw, 22px);
  color: var(--muted);
}
.hero__hint{
  margin-top: 40px;
  font-size: 12px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: rgba(215,208,191,.35);
}

/* scenes */
.scene{
  background: radial-gradient(900px 700px at 50% 40%, #0c0f12, var(--bg));
}
.scene__inner{
  width: min(var(--frameMax), 92vw);
}

/* frame */
.frame{
  max-height: 82vh;
  margin:0;
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 40px 110px rgba(0,0,0,.75);
  border: 1px solid rgba(185,164,122,.18);
  background: rgba(0,0,0,.18);
  transform-origin: 50% 50%;
}
.frame img{
  max-height: 82vh;
  width: 100%;
  height: auto;
  object-fit: contain;
  height:auto;
  display:block;
}

/* text */
.text{
  background: linear-gradient(180deg, var(--bg), var(--bg2));
}
.text__inner{
  width:min(820px, 100%);
  padding: 6vh 0;
}
.fragment{
  margin: 0 0 64px;
  font-size: clamp(18px, 2vw, 22px);
}
.fragment:last-child{ margin-bottom:0; }

/* links */
.links{
  background: radial-gradient(900px 700px at 50% 60%, #0b0e12, var(--bg));
  text-align:center;
}
.links__inner{ width:min(var(--max), 100%); }
.links__label{ margin: 0 0 22px; color: var(--muted); }
.icons{
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
  margin-bottom: 22px;
}
.icon{
  text-decoration:none;
  color: rgba(215,208,191,.78);
  border: 1px solid rgba(185,164,122,.22);
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(0,0,0,.18);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.icon:hover{
  transform: translateY(-2px);
  border-color: rgba(185,164,122,.42);
  color: rgba(215,208,191,.95);
}

.echo-btn{
  border: 1px solid rgba(185,164,122,.22);
  background: rgba(0,0,0,.18);
  color: rgba(215,208,191,.70);
  border-radius: 999px;
  padding: 10px 16px;
  letter-spacing: .25em;
  text-transform: lowercase;
  cursor: pointer;
}
.echo-btn:hover{
  border-color: rgba(185,164,122,.42);
  color: rgba(215,208,191,.9);
}

/* end */
.end{ text-align:center; }
.end__inner{ width:min(var(--max), 100%); }
.end__line{
  margin: 0 0 12px;
  font-size: clamp(22px, 3vw, 34px);
  letter-spacing: .02em;
}
.end__line:last-child{ margin-bottom:0; color: var(--muted); }

/* reveal base */
.reveal{
  opacity:0;
  filter: blur(1px);
  transition:
    opacity var(--revealDur) var(--revealEase),
    transform var(--revealDur) var(--revealEase),
    filter var(--revealDur) var(--revealEase);
  will-change: opacity, transform, filter;
}
.reveal.in{
  opacity:1;
  filter: blur(0);
}

/* entrance styles */
.in-place{ transform: translateY(12px); }
.reveal.in.in-place{ transform: translateY(0); }

.slide-right{ transform: translateX(120px); }
.reveal.in.slide-right{ transform: translateX(0); }

/* fade elements (their opacity will be controlled by JS after entrance) */
.fade{
  /* start like normal reveal, then JS will take over opacity */
}
.slow{
  /* tylko trochę wolniej wrażeniowo */
  transition-duration: 1150ms;
}

/* delays */
.delay-1{ transition-delay: 160ms; }
.delay-2{ transition-delay: 320ms; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .reveal{ transition:none; opacity:1; transform:none; filter:none; }
  .icon{ transition:none; }
}