:root {
  --frame-w: clamp(260px, 22vw, 360px);
  --frame-thick: 12px;

  --matte-dark:#0d0d0d;
  --matte-light:#151516;
  --noise-light: rgba(255,255,255,.04);
  --noise-dark: rgba(0,0,0,.25);
  --accent-red-1: rgba(177,43,43,.4);
  --accent-red-2: rgba(177,43,43,.2);
  --edge-highlight: rgba(255,255,255,.08);

  --ink-900:#0b0b0b;
  --ink-800:#121315;
  --ink-700:#191b1f;
}

main {
    background: linear-gradient(90deg,rgba(11, 11, 11, 1) 0%, rgba(28, 28, 28, 1) 51%, rgba(11, 11, 11, 1) 100%);
}

p{ 
    margin: 0;
}

html,body{
    background:var(--main-bg);
    color:var(--main-light);
}

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

#about{position:relative; height:320vh}
.about-sticky{
    position:sticky;
    top:var(--header-h);
    height:calc(100vh - var(--header-h));
    overflow:hidden;
    isolation:isolate;
    display:grid;
    place-items:center;
    padding-inline:clamp(20px,5vw,80px);
}

.seed{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    text-align:center;
    pointer-events:none
}

.seed .bg{
    position:absolute;
    inset:-12vh 0 -6vh 0; 
    background:
      radial-gradient(60% 40% at 50% 5%, color-mix(in srgb, var(--text-red) 10%, transparent), transparent 70%),
      var(--about-bg, url("../assets/img/about-us-bg.png")) center top / cover no-repeat;
    transform:translateY(-4vh) scale(calc(1.02 - var(--p,0)*.03)); 
    opacity:calc(.48 - var(--p,0)*.28);
    will-change:transform, opacity;
    z-index:-1;
}

.headline{
    margin:0;
    letter-spacing:.08em;
    position:relative;
    display:grid;
    place-items:center;
    width:100%;
    max-width:1200px;
    text-align:center
}

.headline span{
    display:inline-block;
    font-size:clamp(3.8rem,10vw,9rem);
    padding-inline:.2em;
    background:linear-gradient(180deg,#f2f2f2 0%,#d7d7d7 45%,#bebebe 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    filter:
      drop-shadow(8px -5px 0 rgba(73, 73, 73, 0.7))
}

.emerge{
    mask-image:radial-gradient(circle at var(--seedX,50%) var(--seedY,55%), #000 0 var(--r,120%), transparent calc(var(--r,120%) + 1%));
    -webkit-mask-image:radial-gradient(circle at var(--seedX,50%) var(--seedY,55%), #000 0 var(--r,120%), transparent calc(var(--r,120%) + 1%));
    transform:translateY(calc(var(--introY,0)*1px)) scale(calc(1 + var(--introS,0)));
    opacity:var(--introA,1)
}

.seed.seed-hidden .headline{
    opacity:0;
    transform:translateY(-12vh) scale(.92);
    mask:none;
    -webkit-mask:none;
    transition:opacity .3s ease, transform .3s ease
}
.seed.seed-hidden{
    pointer-events:none
}

.stage-divider{
    display:none
}

.story-wrap,
.story2-wrap{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    gap:clamp(1.2rem,3vw,2rem);
    padding-inline:clamp(20px,6vw,96px);
    text-align:center;
  
}

.story{
    max-width:100ch;
    margin:0 auto;
    transform:translateY(calc(var(--copyY,0)*1px));
    opacity:var(--copyA,0)
}

.story-head{
    margin:0 0 .4rem 0;
    font-size:clamp(2.2rem,5vw,3.6rem);
    font-weight:900;
    letter-spacing:.15em;
    text-transform:uppercase;
    color:transparent;
    -webkit-text-stroke:2px var(--main-light);
    position:relative
}

.story-head::after{
    content:"POZNAJ NASZĄ SIŁOWNIĘ";
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    color:var(--main-light);
    opacity:.1
}
.story p{
    margin:.5rem auto;
    font-size:clamp(1rem,1.1vw,1.2rem);
    color:#d4d7d9;
    line-height:1.7;
}

.story2{
    max-width:68ch;
    margin:0 auto;
    transform:translateY(calc(var(--copy2Y,0)*1px));
    opacity:var(--copy2A,0);
}

.story2-head{
    margin:0 0 .4rem 0;font-size:clamp(2rem,4.5vw,3.2rem);
    font-weight:900;letter-spacing:.12em;text-transform:uppercase;
    color:var(--text-red);
    text-shadow:0 0 18px color-mix(in srgb, var(--text-red) 35%, transparent);
}
.story2 p{
    margin:.5rem auto;
    font-size:clamp(1rem,1.1vw,1.2rem);
    color:#d4d7d9;
    line-height:1.7;
}

#coach{
    position:relative;
    padding-block:6rem 2rem;
}

.coach-bar{
    position:relative;
    display:grid;
    place-items:center;
    padding:2rem 0;
}

.coach-bar::before{
    display:none;
}

.coach-head{
    margin:0;
    text-align:center;
    font-size:clamp(3rem,8vw,8rem);
    letter-spacing:.08em;
    position:relative;
    color:var(--main-light);
    -webkit-text-stroke:0 transparent;
    opacity:1;
    transform:none;
}

.trainer-spot{
    margin-top: 5rem;
    color: var(--main-light);
    background: transparent;
    padding: 4rem 15rem 4rem 15rem;
    max-width: 2200px;
    margin: auto;
}

.trainer-spot__wrap{
  display:grid;
  grid-template-columns:auto 1fr;
  gap: clamp(3rem,4vw,5rem);
  margin-bottom: 8rem;
}

.trainer-spot__wrap.reverse {
  direction: rtl;
}
.trainer-spot__wrap.reverse > * {
  direction: ltr;
}

.trainer-frame{ 
  margin:0; 
  position:relative;
  isolation:isolate;
}

.trainer-frame__shell{
  position:relative;
  width:var(--frame-w);
  padding:var(--frame-thick);
  border-radius:16px;
  background:
    linear-gradient(160deg, var(--matte-light), var(--matte-dark) 80%),
    repeating-linear-gradient(135deg, var(--noise-light) 0 2px, transparent 2px 6px),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px),
    radial-gradient(60% 40% at 40% 0%, var(--accent-red-1), transparent 75%);
  background-blend-mode: normal, multiply, multiply, overlay;
  box-shadow:
    0 18px 36px rgba(0,0,0,.6),
    0 6px 14px rgba(0,0,0,.45),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transform: translateY(-6px) translateX(-6px);
  transition: box-shadow .4s ease, transform .4s ease;
  z-index: 2;
}

.trainer-frame__shell::before{
  content:"";
  position:absolute; inset:0;
  border-radius:16px;
  background:
    linear-gradient(120deg, var(--accent-red-1), transparent 50%),
    linear-gradient(300deg, var(--accent-red-2), transparent 60%),
    linear-gradient(0deg, var(--edge-highlight), transparent 80%);
  mix-blend-mode: overlay;
  opacity:.8;
  pointer-events:none;
  z-index:0;
}

.trainer-frame__shell::after{
  content:"";
  position:absolute;
  top:10px; left:10px; right:-10px; bottom:-10px;
  border-radius:18px;
  background:linear-gradient(160deg,#1a1a1b,#090909);
  box-shadow:
    0 8px 20px rgba(0,0,0,.75),
    inset 0 0 0 1px rgba(255,255,255,.02);
  transform: translateY(4px) translateX(4px);
  transition: all .4s ease;
  z-index:-1;
}

.trainer-frame__img{
  display:block;
  width:100%;
  height:auto;
  border-radius:10px;
  background:linear-gradient(180deg,#141416,#0b0c0d 60%,#090a0b);
  box-shadow:
    0 20px 22px rgba(0,0,0,.55),
    0 8px 12px rgba(0,0,0,.35);
  outline:1px solid rgba(255,255,255,.03);
  outline-offset:-1px;
}

.trainer-frame__gloss{display:none;}

.trainer-frame__caption{
  margin-top:.6rem;
  font-size:.92rem;
  color:#bdbdbd;
}

.trainer-frame__shell:hover{
  transform: translateY(-12px) translateX(-12px) scale(1.04);
  box-shadow:
    0 26px 44px rgba(0,0,0,.65),
    0 10px 20px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(255,255,255,.05);
}
.trainer-frame__shell:hover::after{
  transform: translateY(16px) translateX(16px) scale(.96);
  opacity:.7;
  box-shadow:
    0 2px 10px rgba(0,0,0,.7),
    inset 0 0 0 1px rgba(255,255,255,.02);
}

.trainer-spot__content h2{
  font-size: 3rem;
  margin:0 0 .4em;
  font-family: "Dela Gothic One", sans-serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
  letter-spacing: 1px;
  filter:
        drop-shadow(4px 4px 0 rgba(119, 119, 119, 0.7))  
        drop-shadow(-2px -2px 0 rgba(110, 110, 110, 0.33));
}

.trainer-spot__content p{
  margin-top: 2rem;
  color:#cfcfcf;
}

.trainer-spot__content h4 {
  font-size: 2rem;
  color: var(--text-red);
  margin: 2rem 0 0 0;
}

.trainer-spot__content .trainer-social-media {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.trainer-spot__content .trainer-social-media .item {
  display: flex;
  flex-direction: row;
  gap: 10px;
  align-items: center;
}

.trainer-spot__content .trainer-social-media .item {
  color: var(--text-red);
}

.trainer-spot__content .trainer-social-media .item a {
  text-decoration: none;
  color: var(--main-light);
  transition: all .3s;
}

.trainer-spot__content .trainer-social-media .item a:hover {
  color: var(--text-red);
}

@media (max-width: 1268px) {
    #about h1 {
        font-size: 3.5rem;
    }

    .about-paragraph {
        flex-direction: column;
        padding: 0;
        text-align: center;
    }

    .about-paragraph img {
        width: 100%;
    }

    .about-paragraph h2 {
        color: var(--text-red);
        padding-left: 10px;
        font-style: italic;
        font-size: 2rem;
        font-weight: bold;
    }

    .about-paragraph p {
        font-size: 1rem;
    }

    section#coach h1 {
        font-size: 5rem;
    }

    .trainer-spot {
      padding: 4rem 5rem 4rem 5rem;
    }

    .trainer-spot__content h2 {
      font-size: 2rem;
    }
}

@media (max-width: 768px) {
    section#coach h1 {
        font-size: 3.3rem;
    }

    .trainer-spot {
      padding: 4rem 1rem 4rem 1rem;
    }

    .trainer-spot__content {
      text-align: center;
    }

    .trainer-spot__content h2 {
      text-align: center;
    }

    .trainer-spot__wrap { 
      grid-template-columns:1fr; 
      justify-items:center; 
    }

    .trainer-spot__content .trainer-social-media .item {
      justify-content: center;
    }
}