:root {
    --c-white-05: #ffffff;
    --c-white-05-70: rgba(255, 255, 255, 0.7);
    --c-white-05-50: rgba(255, 255, 255, 0.5);
    --c-white-05-15: rgba(255, 255, 255, 0.15);
    --c-black-00: #000000;
    --c-dark-magenta: #231137;

    --trans-ease: 0.2s ease-in-out;
    --trans-func: 0.7s cubic-bezier(0.68, 0.1, 0, 1);

    --min-width: 320px;
    --max-width: 1920px;
    
    --content-padding: 0; 
    --intro-block-padding: 15px 20px;
    --links-row-padding: 0 15px;
    --links-row-height: 65px;

    --tbilisi-time-margin: 15px 0; 

    --font-h1: 10vw; 
    --font-intro: clamp(10.5pt,4.375vw,11pt);
    --font-intro-lh: 1.4em;
    --font-additional: 7pt; 
    --font-expanded: 'Zalando Sans Expanded', sans-serif;

    --section-gap: 10px; 

    --v-explanation: none;
    --v-world-times-block: none;

    --align-bottom: center; 

    --current-time-height: 25px; 
}

* { box-sizing: border-box; }
body, html {
    margin: 0;
    padding: 0;
    font-family: 'Zalando Sans', sans-serif;
    color: var(--c-white-05-70);
    line-height: 1.6;
}

html { 
    background-color: var(--c-dark-magenta); 
    scroll-behavior: smooth;
    overflow-x: hidden;
    height: 100%;
}

body {
    background-color: var(--c-dark-magenta);
    /*background-image: url(../img/bg.jpg);*/
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: calc(var(--vh, 1vh) * 100);
    overflow-x: hidden;
    min-width: var(--min-width);
}

h1 {
    font-family: var(--font-expanded); 
    font-weight: 600;
    font-size: var(--font-h1);
    color: var(--c-white-05);
    margin: 0;
    line-height: 1.2em;
    transition: all var(--trans-func);
    transition-property: opacity, transform;
    white-space: nowrap;
}

.background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    z-index: 0;
    max-width: 100%;
    opacity: 1;
    transition: opacity var(--trans-func);
    transition-duration: 1.2s;
}

.background .vibes {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    display: flex;
    z-index: -1;
    background-image: url(../img/bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.background .lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('../img/lines.png') repeat;
    z-index: 0;
    opacity: 0.7;
}

.background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 0;
    padding: var(--content-padding);
    margin: 0 auto;
    width: 100%;
    min-height: calc(var(--vh, 1vh) * 100);
    max-width: 1920px;
    min-width: var(--min-width);
}

.top-section, .bottom-section {
    display: flex;
    gap: var(--section-gap);
    justify-content: space-between;
    flex-direction: column;
}

.bottom-section {
    align-items: var(--align-bottom);
}

.intro-block, .links-table {
    display: flex;
    flex-direction: column;
    flex: 1 1 50%
}

.intro-block { padding: var(--intro-block-padding) }

.links-table {
    max-width: 650px;
    margin-top: 0px;
    justify-content: right;
}

.intro-block p { 
    margin: 0.5em 0 0; 
    transition: all var(--trans-func);
    transition-property: opacity, transform;
    opacity: 1;
}

.intro {
    max-width: 600px;
    font-size: var(--font-intro);
    line-height: var(--font-intro-lh);
}

.intro .explanation { display: var(--v-explanation); }

.links-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    color: var(--c-white-05-70);
    font-size: var(--font-intro);
    font-weight: 500;
    border-bottom: 1px solid var(--c-white-05-15);
    padding: var(--links-row-padding); 
    height: var(--links-row-height);
    z-index: 1;
    opacity: 1;
    transition: all var(--trans-func);
    transition-property: opacity, transform;
}
.links-table .links-row:first-child {
    border-top: 1px solid var(--c-white-05-15);
}

.link-title-container {
    display: flex;
    flex: 1 1;
    flex-direction: column;
}

.link-title-holder {
    display: flex;
    gap: 10px;
    flex: 1 1;
}

.link-hint {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin: -6px 0 6px;
    height: 0;
    overflow: hidden;
    font-size: 6.5pt;
    text-transform: uppercase;
    transition: all var(--trans-func);
    transition-property: opacity, color, height;
    opacity: 0;
    mix-blend-mode: difference;
}

.touched .link-hint {
    height: 12px;
    opacity: 1;
}

.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.links-row:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background-color: var(--c-white-05-50);
    opacity: 0.2;
    z-index: -1;
    transition: width var(--trans-func);
}
.links-row.touched:before {
    width: 100%;
}

.links-row:hover {
    color: var(--c-white-05);
    z-index: 2;
}

.links-row:hover .icon.pdf svg, .links-row:hover .icon.email svg {
    fill: var(--c-white-05);
}

.icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    z-index: 2;
}

.links-row .label {
    flex-grow: 1;
    transition: color var(--trans-func);
    z-index: 2;
    mix-blend-mode: difference;
    font-family: var(--font-expanded);
    text-transform: uppercase;
    display: flex;
    padding-top: 3px;
}

.links-row a { display: none; }

.links-row .arrow {
    display: flex;
    fill: var(--c-white-05);
    align-items: center;
    margin: 0 20px 0 0;
    transition: margin var(--trans-func);
    z-index: 2;
    mix-blend-mode: difference;
}
.links-row.touched .arrow {
    margin: 0 0 0 20px;
}

.links-row .arrow svg{ 
    width: 30px;
    height: 20px;
}

.icon.figma svg {
    width: 15px;
    height: 23px;
}

.icon.dribbble svg {
    width: 20px;
    height: 20px;
}

.icon.pdf {
    mix-blend-mode: difference;
}
.icon.pdf svg, .icon.email svg {
    width: 20px;
    height: 20px;
    fill: var(--c-white-05-50);
    transition: fill var(--trans-func);
}

.tbilisi-time {
    margin: var(--tbilisi-time-margin);
    display: flex;
    gap: 5px;
    align-items: center;
    opacity: 1;
    transition: all var(--trans-func);
}

.current-time {
    color: var(--c-white-05);
    display: flex;
    align-items: center;
    gap: 5px;
    height: var(--current-time-height);
}

.world-times-block {
    display: var(--v-world-times-block);
    gap: 50px;
    padding-right: 50px
}

.world-time {
    display: flex;
    height: 20px;
    gap: 3px;
    align-items: center;
    opacity: 1;
    transition: all var(--trans-func);
}

.world-time .time-container { height: 100%; }

.additional-info {
    color: var(--c-white-05);
    font-size: var(--font-additional);
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--c-white-05-15);
    padding-left: 25px;
    margin-left: 20px;
    padding: 7px 0 7px 25px;
    white-space: nowrap;
}

.world-time .additional-info {
    border: none;
    padding: 0;
    font-size: 7.5pt;
    margin: 0;
    line-height: 1.2em;
    padding-left: 10px;
}

.highlighted { color: var(--c-white-05); max-width: 500px; }

.follower { 
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    aspect-ratio: 300/169;
    pointer-events: none;
    transform-origin: center center;
    transition: width var(--trans-func), height var(--trans-func), margin var(--trans-func), opacity var(--trans-ease);
    transition-duration: 0.3s;
    opacity: 0;
    z-index: 0;
    margin: 0 0 0 0;
    border-radius: 2px;
    overflow: hidden;
}

.follower img {
    width: 100%;
    height: 100%;
}

#rowPDF .follower { 
    margin: 0 0 0 0;
    aspect-ratio: 194/275
}

#rowCaseStudies .follower { 
    display: flex; 
    justify-content: start;
}

.follower .case-slide {
    width: 100%;
    flex-shrink: 0;
    transition: left var(--trans-func);
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    z-index: 1;
    overflow: hidden;
}

.follower .case-slide.active {
    left: 0;
    opacity: 1;
    z-index: 0;
}

.follower .case-slide.moving {
    left: 0;
    opacity: 1;;
}

#rowDribbble .follower { 
    display: flex; 
    background-color: white;
    gap: 11px;
    justify-content: center;
}

.dribbble-stripe {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 85px;
    animation: dribbleScroll 40s linear infinite;
    animation-play-state: paused;
}
.dribbble-stripe:nth-child(2) {
    animation-delay: -10s;
    animation-direction: reverse;
}
.dribbble-stripe:nth-child(3) {
    animation-delay: -20s;
}

#rowDribbble:hover .dribbble-stripe {
    animation-play-state: running;
}

.dribbble-stripe img {
    width: 100%;
    height: unset;
    display: block;
}

@keyframes dribbleScroll {
    0% { transform: translateY(0); }
    100% { transform: translateY(-365px); }
}

.disable-transitions {
  transition: none !important;
}

.links-row.touched .follower {
    width: 300px;
    height: 169px;
    margin: -84.5px 0 0 -150px;
    left: 90%;
    top: 50%;
    opacity: 1;
}

#rowPDF.touched:hover .follower {
    width: 194px;
    height: 275px;
    margin: -137.5px 0 0 -97px;
}

.redirect { 
    max-width: 300px; 
    padding: 20px 40px; 
    border: 1px solid var(--c-white-05-15); 
    margin: 100px 20px;
    transition: all var(--trans-func);
    opacity: 0;
}

.redirect.shown {
    margin-top: 20px; 
    opacity: 1;
}

.redirect a { color: #ac5897; }

h1.faded, .intro-block p.faded { transform: translateY(50px); opacity: 0; }
.links-row.faded { transform: translateX(-100px); opacity: 0; }
.background.faded { opacity: 0; }
.world-time.faded, .tbilisi-time.faded { opacity: 0; transform: translateX(-50px) }

@media (hover: hover) and (pointer: fine) {

    .links-row:hover .follower {
        width: 300px;
        height: 169px;
        margin: -84.5px 0 0 -150px;
        opacity: 1;
    }

    .links-row:hover:before {
        width: 100%;
    }

    #rowPDF:hover .follower {
        width: 194px;
        height: 275px;
        margin: -137.5px 0 0 -97px;
    }

    .links-row:hover .link-hint {
        height: 12px;
        opacity: 1;
    }

    .links-row:hover .arrow {
        margin: 0 0 0 20px;
    }
}

@media (orientation: portrait) and (min-height: 800px) {
    :root { --v-explanation: inline; }
}

@media (min-width: 400px) {
    :root {
        --intro-block-padding: 20px 30px;
    }
}

@media (min-width: 480px) {
    :root { 
        --v-explanation: inline; 
        --font-h1: clamp(45px,10vw,55px);
    }
}

@media (min-width: 620px) {
    :root { 
        --v-world-times-block: flex;
        --tbilisi-time-margin: 15px 0 0 0;
    }
    .bottom-section { flex-direction: row; gap: 5vw; padding: var(--intro-block-padding); }
    .world-times-block { gap: 2.5vw; align-self: flex-end; padding-right: 0; margin-bottom: 9px; }
    .world-times-block .additional-info { font-size: clamp(6pt,1.3vw,7pt); }
}

@media (min-width: 650px) {
    :root {
        --content-padding: clamp(10px,5vh,30px) 0;
        --intro-block-padding: 0 20px;
        --section-gap: 20px;
    }
    .content { max-width: 650px; margin: 0 auto; }
    .bottom-sectiosn { padding: 0 20px; }
}

@media (min-width: 760px) {
    .intro-block p { margin-top: 1em; }
    body { display: flex; }
    .content { height: 90vh; min-height: 90%; max-height: 90%; align-self: center; }
}

@media (min-width: 1080px) {
    :root {
        --section-gap: 70px;
        --content-padding: 0 clamp(30px,5vw,100px);
        --font-h1: clamp(30px,4.5vw,60px);
        --links-row-padding: 0 30px 0 40px;
        --links-row-height: 85px;
        --font-intro-lh: 1.6em;
        --font-additional: 8pt;
        --current-time-height: 35px;
    }
    .top-section { flex-direction: row; max-width: var(--max-width); }
    .content { max-width: var(--max-width); height: 85vh; min-height: 70%; max-height: 70%;  }
    .world-times-block { padding-right: 50px;  }
}

.bottom-bar-overlay {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: env(safe-area-inset-bottom);
    background-color: var(--c-dark-magenta);
    z-index: 9999;
    pointer-events: none;
}